【VUE】axios请求失败,自动发起重试请求
axios 利用interceptors(拦截器)完美解决自动重试问题。axios.defaults.retry = 1;axios.defaults.retryDelay = 1000
·
axios 利用interceptors(拦截器)完美解决自动重试问题。
Axios 是一个基于 Promise 的 HTTP 客户端,而 HTTP 协议是基于请求和响应:
所以 Axios 提供了 请求拦截器和响应拦截器 来分别处理请求和响应,它们的作用如下:
-
请求拦截器:该类拦截器的作用是在请求发送前统一执行某些操作,比如在请求头中添加 token 字段。
-
响应拦截器:该类拦截器的作用是在接收到服务器响应后统一执行某些操作,比如发现响应状态码为 401 时,自动跳转到登录页。
import axios from 'axios'
// 重试次数,共请求2次
axios.defaults.retry = 1
// 请求的间隙
axios.defaults.retryDelay = 1000
axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
var config = err.config;
// 如果配置不存在或未设置重试选项,则拒绝
if (!config || !config.retry) return Promise.reject(err);
// 设置变量以跟踪重试次数
config.__retryCount = config.__retryCount || 0;
// 判断是否超过总重试次数
if (config.__retryCount >= config.retry) {
// 返回错误并退出自动重试
return Promise.reject(err);
}
// 增加重试次数
config.__retryCount += 1;
//打印当前重试次数
console.log(config.url +' 自动重试第' + config.__retryCount + '次');
// 创建新的Promise
var backoff = new Promise(function (resolve) {
setTimeout(function () {
resolve();
}, config.retryDelay || 1);
});
// 返回重试请求
return backoff.then(function () {
return axios(config);
});
});
axios.get('https://www.google.com', {
retry: 5,
retryDelay: 1000,
timeout: 6000
})
.then(res=> {
console.log('success', res.data);
})
.catch(err=> {
console.log('failed', err);
});
更多推荐
已为社区贡献2条内容
所有评论(0)