Vue project request timeout
Nowadays, most web projects adopt the front-end separation mode. This mode has many advantages, but it will also bring many problems.
for example
When requesting a backend interface, it will be affected by network factors, resulting in the request timeout;
This requires us to set up interception in the request method and process the request timeout;
Axios encapsulation method I use in my project
Please timeout intercept the network
import axios from "axios";
import { get } from "http";
import { Toast } from 'vant';
// api path// const server = "";
const httpAxios = ();//Create an instancelet Config = {
TIMEOUT: 6000,//Set the timeout to 6 seconds baseURL: {
dev: window.BASEURL_01,
prod: ''
}
};
// axios configuration = ;
(
response => {
return response;
},
error => {
if(('timeout')){ // Determine whether the request exception message contains a timeout string Toast('Request timed out, please try again later')
return (error); // reject this error message }
Toast('The network connection failed, please try again later')
return (error);
});
export function fetch(url, method = "GET", params, query) {
if (sessionStorage.app_token && sessionStorage.device_id) {
["app-token"] = sessionStorage.app_token;
}
return new Promise((resolve, reject) => {
httpAxios({
method: method,
url: global["G_SERVER_URL"] + url,
data: params,
params: query
})
.then(response => {
resolve();
})
.catch(error => {
reject(error);
});
});
}Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.