Axios how to wake up the request again after the request is cancelled
part of the code is as follows:
const axiosAPI = axios.create({
baseURL: GlobalPath.ajaxurl,
timeout: 8000,
responseType: "json",
withCredentials: false,
validateStatus: function (status) {
return (status >= 200 && status < 300) || status == 304
},
cancelToken: new axios.CancelToken(function (c) {
cancel = c
}),
});
axiosAPI.interceptors.request.use(config => {
let startTime = +new Date();
if (axiosPromiseObj[config.url] && deepCompare(config.data,axiosPromiseObj["data"]) && startTime - endTime < 500){
axiosPromiseObj[config.url](); //
axiosPromiseObj[config.url] = cancel;
} else {
axiosPromiseObj[config.url] = cancel;
axiosPromiseObj["data"] = config.data;
}
}
send a network request to avoid repeated clicks. If there are repeated clicks in the 500ms, cancel the request (deepCompare deeply compares whether the data are consistent twice). The problem is: after canceling this request, it is found that all future requests are useless. Please help me with the answer, thank you very much! -sharp-sharp-sharp problem description
I think avoiding repeated submissions should be an anti-shake operation, rather than canceling a request
you use the same cancel
this cancel can only be used once and again new what you use later is the previous one that directly throws an exception
you can make a similar package
let urlTimer = {}
function _axios(config) {
return new Promise(function (resolve,reject) {
clearTimeout(urlTimer[config.url]);
urlTimer[config.url] = setTimeout(function () {
axios(config).then(resolve,reject)
}, 500)
})
}
_axios({url:"/123"})
_axios({url:"/123"})
_axios({url:"/567"})
you can write it this way:
axiosAPI.interceptors.request.use(config => {
let startTime = +new Date();
config.cancelToken = new axios.CancelToken(function (c) {
cancel = c;
});
if (axiosPromiseObj['url'] === config.url && deepCompare(config.data,axiosPromiseObj["data"]) &&
startTime - endTime < 500){
cancelRequest();
} else {
axiosPromiseObj['url'] = config.url
axiosPromiseObj["data"] = config.data;
}
}
you can't write like this:
axiosAPI.interceptors.request.use(config => {
let startTime = +new Date();
config.cancelToken = new axios.CancelToken(function (c) {
cancel = c;
});
if (axiosPromiseObj[config.url] && deepCompare(config.data,axiosPromiseObj["data"]) && startTime - endTime < 500){
axiosPromiseObj[config.url]();
axiosPromiseObj[config.url] = cancel;
} else {
axiosPromiseObj[config.url] = cancel;
axiosPromiseObj["data"] = config.data;
}
it doesn't make sense.
I have the same problem, boss. What do you think?
my code
export default class HttpUtil {
static post(url, bodyParam = '') {
return new Promise((resolve, reject) => {
server.post(url, JSON.stringify(bodyParam), {cancelToken: source.token})
.then(res => {
resolve(res);
})
.catch(err => {
console.log(`${url}::${JSON.stringify(err)}`)
if (err.code && err.code == 'ECONNABORTED') {
return reject({message: ''})
} else if (err && err.response && err.response.status == 403) {
//app
DeviceEventEmitter.emit('403')
return reject({message: '', errCode: '403'})
} else if (err.message == 'Cancel Http') {//
return reject({errType: 1})
} else {
return reject({message: ','})
}
})
});
}
static cancelTask() {
source.cancel('Cancel Http');
}
}
