Axios轻松实现请求重试和取消，一行代码即可搞定！

2023-11-21 17:07:01

作为一名前端开发人员，我们经常需要处理各种HTTP请求。然而，网络不稳定或服务器响应缓慢时，这些请求可能会变得非常棘手。幸运的是，Axios这个强大的JavaScript HTTP客户端库提供了一种简洁的方法来实现请求的重试和取消功能。本文将详细介绍如何使用Axios实现这些功能，并分享一些最佳实践。

什么是HTTP请求重试？

HTTP请求重试是一种在请求失败后自动重新发送请求的机制。这对于处理暂时性的服务器错误或网络中断非常有用。通过在我们的应用程序中实现请求重试，我们可以提高应用程序的健壮性，并确保即使在不稳定的网络条件下也能成功发送请求。

什么是HTTP请求取消？

HTTP请求取消允许我们主动中止正在进行的请求。这在用户导航到其他页面或不再需要请求结果的情况下非常有用。通过实现请求取消，我们可以释放系统资源并防止不必要的网络流量。

使用Axios实现请求重试和取消

Axios提供了一个名为axios-retry的插件，可以轻松地为我们的请求添加重试和取消功能。要安装该插件，可以使用以下命令：

npm install axios-retry

安装完成后，我们可以通过如下方式配置插件：

import axios from 'axios';
import {Cancel, RetryAfterTimeout} from 'axios-retry';

// 创建一个带有重试和取消功能的Axios实例
const axiosRetry = axios.create({
  plugins: [
    new Cancel(),
    new RetryAfterTimeout({
      retries: 3,
      delay: 1000, // 重试之间的延迟时间（毫秒）
      backoffType: 'exponential', // 指数级回退
    }),
  ],
});

在这个配置中，我们指定了重试次数、重试之间的延迟时间以及重试之间的回退类型。指数级回退意味着每次重试之间的延迟时间都会加倍，这有助于防止在服务器繁忙时发送过多请求。

使用重试功能

要使用重试功能，我们只需要在调用axios方法时传递retry选项。例如：

axiosRetry.get('/api/data', {retry: true})
  .then((response) => {
    // 处理请求成功
  })
  .catch((error) => {
    // 处理请求失败
  });

取消请求

要取消请求，我们可以使用CancelToken。例如：

const source = axios.CancelToken.source();

axiosRetry.get('/api/data', {
  retry: true,
  cancelToken: source.token,
})
  .then((response) => {
    // 处理请求成功
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      // 请求已被取消
    } else {
      // 处理请求失败
    }
  });

// 取消请求
source.cancel();