现在网页项目大多采用前后端分离模式，这种模式优点有很多，但是也会带来不少问题，比如：请求后端接口时会受网络因素影响，导致请求超时；这就需要我们在请求方法中设置拦截，对请求超时做处理；，下面我们就来说一说关于vue 请求超时?我们一起去了解并探讨一下这个问题吧!
vue 请求超时
现在网页项目大多采用前后端分离模式，这种模式优点有很多，但是也会带来不少问题，比如：请求后端接口时会受网络因素影响，导致请求超时；这就需要我们在请求方法中设置拦截，对请求超时做处理；
下面就是我在项目中使用的axios封装方法，设置网络请超时拦截处理
import axios from "axios";
import { get } from "http";
import { Toast } from 'vant';
// api 路径
// const server = "https://operator-app.funenc.com";
const httpAxios = axios.create();//创建实例
let Config = {
TIMEOUT: 6000,//设置超时时间为6秒
baseURL: {
dev: window.BASEURL_01,
prod: ''
}
};
// axios 配置
httpAxios.defaults.timeout = Config.TIMEOUT;
httpAxios.interceptors.response.use(
response => {
return response;
},
error => {
if(error.message.includes('timeout')){ // 判断请求异常信息中是否含有超时timeout字符串
Toast('请求超时，请稍后再试')
return Promise.reject(error); // reject这个错误信息
}
Toast('网络连接失败，请稍后再试')
return Promise.reject(error);
});
export function fetch(url, method = "GET", params, query) {
if (sessionStorage.app_token && sessionStorage.device_id) {
httpAxios.defaults.headers["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(response.data);
})
.catch(error => {
reject(error);
});
});
}
