background
When I was writing a vue project recently, I encountered an axios calling interface pit. There is a front-end module involving axios to call multiple interfaces, and then after requesting to obtain data, use windows.location.href to redirect to a new page. At this time However, I found that the interfaces requested by axios are all in a canceled state.
E.g:
axios.get('/url1')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.get('/url2')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
windows.location.href="/
If it is written like this, because the axios call interface is asynchronous, it is very likely that windows.location.href will be executed before url1 and url2 are requested. At this time, a new page is opened on the current page, and the url1 and url2 requests are all in the canceled state through the chrome f12 console .
The explanation of cancered on StackOverflow online is as follows:
1.The DOM element that caused the request to be made got deleted (i.e. an IMG is being loaded, but before the load happened, you deleted the IMG node)
2.You did something that made loading the data unnecessary. (i.e. you started loading a iframe, then changed the src or overwrite the contents)
3.There are lots of requests going to the same server, and a network problem on earlier requests showed that subsequent requests weren’t going to work (DNS lookup error, earlier (same) request resulted e.g. HTTP 400 error code, etc)
To put it simply, the element or request is interrupted when it is not yet completed.
Solution
There are two methods here: The first is to directly wrap windows.location.href in the processing flow of axios request completion. As below:
axios.get('/url1')
.then(function (response) {
axios.get('/url2')
.then(function (response) { windows.location.href="/"
})
.catch(function (error) {
console.log(error);
});
})
.catch(function (error) {
console.log(error);
});
The advantage of this is that the page will not jump until both url1 and url2 are successfully requested. But there is a new question. How to write if you want to request url1 and url2 multiple times before redirecting? E.g:
for（循环）
{
axios.get('/url1')
.then(function (response) {
axios.get('/url2')
.then(function (response) {
})
.catch(function (error) {
console.log(error);
});
})
.catch(function (error) {
console.log(error);
});
}windows.location.href="/"
If this is the case, the axios request may jump before it is completed. Axios is asynchronous, so windows.location.href may be executed before axios.
Here is a tricky method, using a timer to delay the execution timing of windows.location.href.
setTimeout(function() {
windows.location.href="/"
}, 2000);
Written in this way, it is basically guaranteed that windows.location.href will be executed after axios (depending on the time of axios calling interface and business logic processing)
Blogger: Test to make money
Motto: Focus on testing and automation, and strive to improve the efficiency of research and development; through testing and diligence to complete the original accumulation, through reading and financial management to financial freedom.
csdn：https://blog.csdn.net/ccgshigao
Blog Park: https://www.cnblogs.com/qa-freeroad/