Vue项目请求超时处理方式
作者：一捆铁树枝
这篇文章主要介绍了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);
});
});
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。