封装Axios并添加失败重新请求机制

封装部分

// localAxios.js
'use strict';

export default {
  getInstance(config) {
    let instance = window.axios.create({
      baseUrl: '',     // 服务器地址(省略)
      timeout: '5000'  // 请求超时时间(毫秒)
    });
    
    // 重新请求的次数
    instance.defaults.retry = 3;
    // 重新请求的间隔
    instance.defaults.retryDelay = 1000;
  
    // 设置请求拦截
    instance.interceptors.request.use(
      function (config) {
        // Do something before request is sent
        return config
      },
      function (error) {
        // Do something with request error
        return Promise.reject(error)
      }
    );
  
    // 设置响应拦截
    instance.interceptors.response.use(
      function (response) {
          return response
      },
      function axiosRetryInterceptor(error) {
        var config = error.config;
        
        // 假如config为空或config没有设置retry,直接reject
        if (!config || !config.retry) {
            return Promise.reject(error);
        }
  
        // 重置重试次数
        config.__retryCount = config.__retryCount || 0;
  
        // 检查是否超过重置次数
        if (config.__retryCount >= config.retry) {
          return Promise.reject(error);
        }
  
        // 重发计数器加1
        config.__retryCount += 1;
  
        // 延时重发
        var backoff = new Promise((resolve) => {
          setTimeout(() => {
            resolve();
          }, config.retryDelay || 1);
        });
  
        // 重发请求
        return backoff.then(() => {
          return instance(config);
        });
      }
    );
  
    return instance(config)
  }
}

调用部分

import localAxios from './localAxios';

localAxios.getInstance({
  url: // url,
  method: // "get", "post"
  // other options
}).then(function (response) {
  callback && callback(response.data);
}).catch(function (error) {
  errorCallback && errorCallback(error);
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZTao-z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值