网络重连封装

网络重连

部分情况会遇到业务接口失败,但我们又不希望让用户去退出应用重启,这时候我们可以在网络层设置一个重连机制。写这个的时候我想到了当时实现token无痛刷新时没有去解决的一个痛点,但我去刷新token的时候如果是获取令牌的接口报错那程序会持续不断的请求令牌接口,这对服务端不太友好。之后我会把重连尝试次数限制加到无痛刷新机制中。

这里有一个小tips:

每一个**__retryCount重连次数**都是跟接口的config绑定,互不影响,有相对独立性

代码实现:(最近在学习类的封装,所以统一通过封装类去实现)

简单讲一下思路,在创建axios实例的时候会有加一个requestOptions自定义选项,里面存的是各种自定义需求字段——count,这个字段用来定义我接口重连尝试次数的阈值waitTime:重连延迟时间。当遇到重连的请求时,在config里加一个自定义参数**__retryCount记录当前重连次数**,没超过阈值的情况,我会重新发起这个请求

axiosInstance(config)超过阈值通过Promise.reject()抛出错误

import { AxiosError, AxiosInstance } from 'axios';
/**
 *  请求重试机制
 */

export class AxiosRetry {
  /**
   * 重试
   */
  retry(axiosInstance: AxiosInstance, error: AxiosError) {
    // @ts-ignore
    const { config } = error.response;
    const { waitTime, count } = config?.requestOptions?.retryRequest;
    config.__retryCount = config.__retryCount || 0;
    if (config.__retryCount >= count) {
      return Promise.reject(error);
    }
    config.__retryCount += 1;
    //请求返回后config的header不正确造成重试请求失败,删除返回headers采用默认headers
    delete config.headers;
    return this.delay(waitTime).then(() => axiosInstance(config));
  }

  /**
   * 延迟
   */
  private delay(waitTime: number) {
    return new Promise((resolve) => setTimeout(resolve, waitTime));
  }
}

你可能感兴趣的:(axios,前端,javascript,vue.js)