100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 【VUE】axios请求失败 自动发起重试请求

【VUE】axios请求失败 自动发起重试请求

时间:2024-02-06 12:31:16

相关推荐

【VUE】axios请求失败 自动发起重试请求

axios 利用interceptors(拦截器)完美解决自动重试问题。

Axios 是一个基于 Promise 的 HTTP 客户端,而 HTTP 协议是基于请求和响应:

所以 Axios 提供了请求拦截器和响应拦截器来分别处理请求和响应,它们的作用如下:

请求拦截器:该类拦截器的作用是在请求发送前统一执行某些操作,比如在请求头中添加 token 字段。

响应拦截器:该类拦截器的作用是在接收到服务器响应后统一执行某些操作,比如发现响应状态码为 401 时,自动跳转到登录页。

import axios from 'axios'// 重试次数,共请求2次axios.defaults.retry = 1// 请求的间隙axios.defaults.retryDelay = 1000axios.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 + '次');// 创建新的Promisevar backoff = new Promise(function (resolve) {setTimeout(function () {resolve();}, config.retryDelay || 1);});// 返回重试请求return backoff.then(function () {return axios(config);});});axios.get('', {retry: 5,retryDelay: 1000,timeout: 6000}).then(res=> {console.log('success', res.data);}).catch(err=> {console.log('failed', err);});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。