Axios 如何实现请求重试?

在 [Axios 如何取消重复请求?] 这篇文章中,阿宝哥介绍了在 Axios 中如何取消重复请求及 CancelToken 的工作原理。而本文将介绍在 Axios 中如何通过 拦截器或适配器 来实现请求重试的功能。那么为什么要进行请求重试呢?这是因为在某些情况下,比如请求超时的时候,我们希望能自动重新发起请求进行重试操作,从而完成对应的操作。

下面阿宝哥将介绍如何使用 Axios 提供的拦截器或适配器来实现请求重试的功能,如果你对 Axios 的拦截器或适配器还不熟悉的话,建议先阅读 [77.9K 的 Axios 项目有哪些值得借鉴的地方] 这篇文章。接下来,我们先来介绍如何使用拦截器实现请求重试的方案。

一、拦截器实现请求重试的方案

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


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

  • 请求拦截器:该类拦截器的作用是在请求发送前统一执行某些操作,比如在请求头中添加 token 字段。
  • 响应拦截器:该类拦截器的作用是在接收到服务器响应后统一执行某些操作,比如发现响应状态码为 401 时,自动跳转到登录页。

在 Axios 中设置拦截器很简单,通过 axios.interceptors.requestaxios.interceptors.response 对象提供的 use 方法,就可以分别设置请求拦截器和响应拦截器:

export interface AxiosInstance {
  interceptors: {
    request: AxiosInterceptorManager<AxiosRequestConfig>;
    response: AxiosInterceptorManager<AxiosResponse>;
  };
}

export interface AxiosInterceptorManager<V> {
  use(onFulfilled?: (value: V) => V | Promise<V>, 
    onRejected?: (error: any) => any): number;
  eject(id: number): void;
}

对于请求重试的功能来说,我们希望让用户不仅能够设置重试次数,而且可以设置重试延时时间。当请求失败的时候,若该请求的配置对象配置了重试次数,而 Axios 就会重新发起请求进行重试操作。为了能够全局进行请求重试,接下来我们在响应拦截器上来实现请求重试功能,具体代码如下所示:

axios.interceptors.response.use(null, (err) => {
  let config = err.config;
  if (!config || !config.retryTimes) return Promise.reject(err);
  const { __retryCount = 0, retryDelay = 300, retryTimes } = 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);
  });
});

以上的代码并不会复杂,对应的处理流程如下图所示:


介绍完如何使用拦截器实现请求重试的功能之后,下面阿宝哥来介绍适配器实现请求重试的方案。

二、适配器实现请求重试的方案

Axios 引入了适配器,使得它可以同时支持浏览器和 Node.js 环境。对于浏览器环境来说,它通过封装 XMLHttpRequest API 来发送 HTTP 请求,而对于 Node.js 环境来说,它通过封装 Node.js 内置的 httphttps 模块来发送 HTTP 请求。

在 [Axios 如何缓存请求数据?] 这篇文章中,阿宝哥介绍了如何通过增强默认的 Axios 适配器,来实现缓存请求数据的功能。同样,采用类似的思路,我们也可以通过增强默认的 Axios 适配器来实现请求重试的功能。

在介绍如何增强默认适配器之前,我们先来看一下 Axios 内置的 xhrAdapter 适配器,它被定义在 lib/adapters/xhr.js 文件中:

// lib/adapters/xhr.js
module.exports = function xhrAdapter(config) {
  return new Promise(function dispatchXhrRequest(resolve, reject) {
    var requestData = config.data;
    var requestHeaders = config.headers;

    var request = new XMLHttpRequest();
    // 省略大部分代码
    var fullPath = buildFullPath(config.baseURL, config.url);
    request.open(config.method.toUpperCase(), buildURL(fullPath, config.params, config.paramsSerializer), true);
    // Set the request timeout in MS
    request.timeout = config.timeout;

    // Listen for ready state
    request.onreadystatechange = function handleLoad() { ... }

    // Send the request
    request.send(requestData);
  });
};

很明显 xhrAdapter 适配器是一个函数对象,它接收一个 config 参数并返回一个 Promise 对象。而在 xhrAdapter 适配器内部,最终会使用 XMLHttpRequest API 来发送 HTTP 请求。为了实现请求重试的功能,我们就可以考虑通过高阶函数来增强 xhrAdapter 适配器的功能。

2.1 定义 retryAdapterEnhancer 函数

为了让用户能够更灵活地控制请求重试的功能,我们定义了一个 retryAdapterEnhancer 函数,该函数支持两个参数:

  • adapter:预增强的 Axios 适配器对象;
  • options:缓存配置对象,该对象支持 2 个属性,分别用于配置不同的功能:
  • times:全局设置请求重试的次数;
  • delay:全局设置请求延迟的时间,单位是 ms。

了解完 retryAdapterEnhancer 函数的参数之后,我们来看一下该函数的具体实现:

function retryAdapterEnhancer(adapter, options) {
  const { times = 0, delay = 300 } = options;

  return async (config) => {
    const { retryTimes = times, retryDelay = delay } = config;
    let __retryCount = 0;
    const request = async () => {
      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();
  };
}

以上的代码并不会复杂,核心的处理逻辑如下图所示:

2.2 使用 retryAdapterEnhancer 函数

2.2.1 创建 Axios 对象并配置 adapter 选项
const http = axios.create({
  baseURL: "http://localhost:3000/",
  adapter: retryAdapterEnhancer(axios.defaults.adapter, {
    retryDelay: 1000,
  }),
});
2.2.2 使用 http 对象发送请求
// 请求失败不重试
function requestWithoutRetry() {
  http.get("/users");
}

// 请求失败重试
function requestWithRetry() {
  http.get("/users", { retryTimes: 2 });
}

好了,如何通过增强 xhrAdapter 适配器来实现 Axios 请求重试的功能已经介绍完了。由于完整的示例代码内容比较多,阿宝哥就不放具体的代码了。感兴趣的小伙伴,可以访问以下地址浏览示例代码。

完整的示例代码:

https://gist.github.com/semlinker/979ebc659abacea7aa6c0c44af070afe

这里我们来看一下 Axios 实现请求重试示例的运行结果:

三、总结

本文介绍了在 Axios 中如何实现请求重试,基于文中定义的 retryAdapterEnhancer 函数或响应拦截器,你可以轻松地扩展请求重试的功能。

Axios 是一个很优秀的开源项目,里面有很多值得我们学习与借鉴的地方。如果你对 Axios 内部 HTTP 拦截器的设计与实现、HTTP 适配器的设计与实现及如何防御 CSRF 攻击感兴趣的话,可以阅读 [77.9K 的 Axios 项目有哪些值得借鉴的地方] 这篇文章。

四、参考资源

  • Github - axios-extensions
  • [Axios 如何取消重复请求?]
  • [Axios 如何缓存请求数据?]
  • [77.9K 的 Axios 项目有哪些值得借鉴的地方]

https://mp.weixin.qq.com/s/8RJSBwCDTvwX3Oql31ckkg

Axios 如何实现请求重试?

发布于:12天以前  |  54次阅读  |  详细内容 »

抖音 iOS 工程架构演进

发布于:17天以前  |  56次阅读  |  详细内容 »

【JS】625- Axios 如何缓存请求数据?

发布于:24天以前  |  73次阅读  |  详细内容 »

iOS中触摸事件的传递和响应分析

发布于:1月以前  |  91次阅读  |  详细内容 »

iOS中触摸事件的传递和响应分析

发布于:1月以前  |  102次阅读  |  详细内容 »

探索M1: 安装iOS版本微信/微信读书

发布于:1月以前  |  183次阅读  |  详细内容 »

iOS 稳定性问题治理:卡死崩溃监控原理及最佳实践

发布于:1月以前  |  150次阅读  |  详细内容 »

2021 给 iOS 开发者的一些建议

发布于:2月以前  |  267次阅读  |  详细内容 »

iOS 优化篇 - 启动优化之Clang插桩实现二进制重排

发布于:3月以前  |  255次阅读  |  详细内容 »

抖音品质建设 - iOS启动优化《实战篇》

发布于:3月以前  |  232次阅读  |  详细内容 »

iOS APP 图标版本化

在我们的项目开发过程中,需要频繁打包给测试人员去测试,有时候我们都不知道测试机上安装的版本是否是最新的,这样会造成很多不必要的麻烦和成本。因此我们需要将buildNumber以水印的方式打在APPIcon上,可以很直观的知道当前是哪一个版本。

发布于:3月以前  |  256次阅读  |  详细内容 »

如何实现一个HTTP请求库——axios源码阅读与分析

在前端开发过程中,我们经常会遇到需要发送异步请求的情况。而使用一个功能齐全,接口完善的HTTP请求库,能够在很大程度上减少我们的开发成本,提高我们的开发效率。

发布于:3月以前  |  248次阅读  |  详细内容 »

老司机 iOS 周报 #144 | 2021-01-14

发布于:3月以前  |  292次阅读  |  详细内容 »

快手,快影 iOS App反调试

发布于:3月以前  |  284次阅读  |  详细内容 »

优酷iOS插件化页面架构方法

随着业务不停地迭代,优酷 APP 用于分发视频资源的 UI 控件越写越多,也越来越复杂,并且同时相似相近的代码也非常多。

发布于:5月以前  |  378次阅读  |  详细内容 »

iOS中的内嵌汇编

写一篇在iOS上使用汇编的文章的想法在脑袋里面停留了很久了,但是迟迟没有动手。虽然早前在做启动耗时优化的工作中,也做过通过拦截objc_msgSend并插入汇编指令来统计方法调用耗时的工作,但也只仅此而已。刚好最近的时间项目在做安全加固,需要写更多的汇编来提高安全性(文章内汇编使用指令集为ARM64),也就有了本文

发布于:5月以前  |  400次阅读  |  详细内容 »

77.9K 的 Axios 项目有哪些值得借鉴的地方

Axios 是一个基于 Promise 的 HTTP 客户端,同时支持浏览器和 Node.js 环境。它是一个优秀的 HTTP 客户端,被广泛地应用在大量的 Web 项目中。

发布于:5月以前  |  371次阅读  |  详细内容 »

不会吧,这也行?iOS后台锁屏监听摇一摇

一般情况下,出于省电、权限、合理性等因素考虑,给人的感觉是很多奇怪的需求安卓可以实现,但是iOS就无法实现!今天要介绍的需求也有这种感觉,就是“当 APP 处于后台或锁屏状态时,依旧可以监听到摇一摇,进而触发某些功能,比如:语音播报”。

发布于:6月以前  |  515次阅读  |  详细内容 »

iOS 稳定性:App 被终止的原因

本次 session 主要内容如下: 介绍了后台应用终止的常见原因,并提供了一些优化建议 介绍了 MetricsKit 提供的在代码中获取诊断和性能数据的方法 介绍了 Xcode Metrics Ogranizer 提供的关于线上用户性能数据的可视化报告

发布于:6月以前  |  774次阅读  |  详细内容 »

优酷iOS插件化页面架构方法

随着业务不停地迭代,优酷 APP 用于分发视频资源的 UI 控件越写越多,也越来越复杂,并且同时相似相近的代码也非常多。

发布于:6月以前  |  510次阅读  |  详细内容 »

最多阅读

快速配置 Sign In with Apple 1年以前  |  4139次阅读
使用 GPUImage 实现一个简单相机 1年以前  |  2839次阅读
APP适配iOS11 2年以前  |  2748次阅读
开篇 关于iOS越狱开发 2年以前  |  2728次阅读
在越狱的iPhone设置上使用lldb调试 2年以前  |  2644次阅读
给数组NSMutableArray排序 2年以前  |  2631次阅读
App Store 审核指南[2017年最新版本] 2年以前  |  2577次阅读
所有iPhone设备尺寸汇总 2年以前  |  2495次阅读
UITableViewCell高亮效果实现 2年以前  |  2451次阅读
使用ssh访问越狱iPhone的两种方式 2年以前  |  2382次阅读
关于Xcode不能打印崩溃日志 2年以前  |  2271次阅读
使用ssh 访问越狱iPhone的两种方式 2年以前  |  2169次阅读
UIDevice的简单使用 2年以前  |  1931次阅读
为对象添加一个释放时触发的block 2年以前  |  1930次阅读
使用最高权限操作iPhone手机 2年以前  |  1911次阅读