vue实现请求失败,自动再次请求的功能

import { defineComponent } from 'vue'; 
 import axios, { AxiosRequestConfig, AxiosResponse } from 'guoguo-ts-axios/src'; 
   //https://juejin.cn/post/6973812686584807432 
 export default defineComponent({ 
 name: 'test-withCredentials', 
   setup() { 
 // 1、通过拦截器来实现 
 axios.interceptors.response.use(null as any, err => { 
 const config = err.config; 
 if (!config || !config.retryTimes) { 
 return Promise.reject(err); 
 } 
   const { __retryCount = 0, retryTimes = 0, retryDelay = 3000 } = config; 
 // 在请求对象上设置重试次数 
 config.__retryCount = __retryCount; 
 // 判断是否超过了重试次数 
 if (__retryCount >= retryTimes) { 
 return Promise.reject(err); 
 } 
 // 增加重试次数 
 config.__retryCount++; 
   // 延时处理 
 const delay = new Promise(resolve => { 
 setTimeout(resolve, retryDelay); 
 }); 
 // 重新发起请求 
 return delay.then(function () { 
 return axios(config); 
 }); 
 }); 
   // 2、 通过适配器进行 
 function retryAdapterEnhancer(adapter, options) { 
 const { times = 0, delay = 300 } = options; 
   return async (config:AxiosRequestConfig) => { 
 const { retryTimes = times, retryDelay = delay } = config; 
 let __retryCount = 0; 
 const request = async ():Promise<AxiosResponse> => { 
 try { 
 return await adapter(config); 
 } catch (err) { 
 // 判断是否进行重试 
 if (!retryTimes || __retryCount >= retryTimes) { 
 return Promise.reject(err); 
 } 
 __retryCount++; // 增加重试次数 
 // 延时处理 
 const delay = new Promise(resolve => { 
 setTimeout(resolve, retryDelay); 
 }); 
 // 重新发起请求 
 return delay.then(() => { 
 return request(); 
 }); 
 } 
 }; 
 return request(); 
 }; 
 } 
 axios({ 
 url: 'api/axios/base/get', 
 params: { a: 1 }, 
 timeout: 200, // 拦截器 
 retryTimes: 3, //拦截器 
 adapter: retryAdapterEnhancer(axios.defaults.adapter, { 
 times: 3, 
 delay: 3000, 
 }), // 适配器 
 }).then(res => { 
 console.log(res); 
 }); 
   return {}; 
 }, 
 render() { 
 return <div>test-retry</div>; 
 }, 
 }); 
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值