“
If a request is sent without reprocessing, the same request may be sent many times and slowly responded to one by one, which can greatly affect performance and page usage
“
The global variable
/ * *
* baseURL is the address for each request
* x represents the XMLHttpRequest instance, initially null
* isSending is an identifier used to determine whether a request is being sent
* /
const baseURL = "http://127.0.0.1:8000/delay"
let x = null, isSending = false
Copy the codeThe original request
if (isSending) x.abort()
x = new XMLHttpRequest()
// In the sending state, modify the identifier
isSending = true
x.open("GET", baseURL)
x.send()
x.onreadystatechange = function () {
if (x.readyState === 4) {// If readyState=4, it indicates that the message has been sent
isSending = false
if (x.status >= 200 && x.status < 300) {
console.log(x.response);
}
}
}
Copy the codeJQuery request
“
JQuery can make Ajax requests either for a single request or for all requests with jQuery global events
“
This request only
$.ajax({
url: baseURL,
type: "GET".
beforeSend: function (jqxhr, settings) {
if (isSending) x.abort()
x = jqxhr
isSending = true
},
success: data= > {
isSending = false
console.log(data)
}
complete: function () {
/*isSending = false*/
},
})
Copy the codeDescription:
beforeSendPlace the XMLHttpRequest objectjqxhrAnd set upsettingsPassed as an argument to the callback function.- Modify the
isSending = falseEither in complete or Success. complete[XHR,TS]TextStat us, with (“success”, “NotModified”, “noContent”, “error”, “timeout”, “Abort”, Or “parserer ror”)success[data, TS, XHR]Parameters are the response body data, TextStatus, and XMLHttpRequest objectcompleteinsuccessBefore performing
Global request
$(document).ajaxSend(function (event,jqXHR,ajaxOptions) {
if (isSending) x.abort()
x = jqXHR
isSending = true
}).ajaxComplete(function () {
isSending = false
});
Copy the codeDescription:
- To make this restriction, you need to set it in all jQuery requests
global = trueOf course, this is the default value, so it is not set separately to accept global events. If you do not want a request to take effect, set global eventsglobal = falseCan. - Global events are never targetedCross-domain scriptingorThe json requestTrigger, whatever it is
globalHow value. - As of jQuery 1.9, allJQuery global Ajax eventAll handlers must be attached to
document
JQuery Ajax sequence of events
“
From kelelipeng
“
Axios request
const CancelToken = axios.CancelToken;
let cancel, isSending = false;
// Request interception, i.e. do something before requesting....
axios.interceptors.request.use(function (config) {
if (isSending) cancel("Do not submit requests multiple times")
isSending = true
return config
})
// Response interception, i.e., after the request do something....
axios.interceptors.response.use(function (res) {
isSending = false
return res
})
axios.defaults.baseURL = "http://127.0.0.1:8000"
// Start the request
axios({
url:'/delay'.
method:"POST".
cancelToken: new CancelToken(function executor(c) {
// The executor function takes a cancel function as an argument
cancel = c;
})
}).then(res= > {
//do something....
}).catch(err= > {
//err.message is the prompt carried by cancel() earlier
console.error(err.message);
})
Copy the codeDescription:
- Request interception if run to
cancel(), will be followed by.catch(err)Capture, available atcatch(err)Do some processing in,cancel()The prompt message carried in thecatch(err)Capture, store inerr.messageIn the - I’m using here
cancelTokenIt’s obscure, it’s specificTo study