axios如何自动重新发送请求

最新推荐文章于 2025-06-06 11:20:50 发布

原创最新推荐文章于 2025-06-06 11:20:50 发布 · 3.9k 阅读

4 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何利用axios-retry库实现HTTP请求的自动重试机制，包括安装、配置及具体应用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在实际工作过程中，遇到这样一个需求：使用axios在调用后台接口超时或是报某个特性的错误码时，需要重新发送请求。此时用到一个第三方的库：axios-retry解决了这个问题。

正文

第一步：安装

npm install axios-retry

第二步：引入并配置

// ES6
import axiosRetry from 'axios-retry';
 
axiosRetry(axios, { retries: 3 });
 
axios.get('http://example.com/test') // 第一个请求失败，第二个返回“OK”
  .then(result => {
    result.data; // 'ok'
  });
 
// 请求之间的指数后退重试延迟
axiosRetry(axios, { retryDelay: axiosRetry.exponentialDelay});
 
// 自定义重试延迟
axiosRetry(axios, { retryDelay: (retryCount) => {
  return retryCount * 1000;
}});
 
// 使用自定义AXIOS实例
const client = axios.create({ baseURL: 'http://example.com' });
axiosRetry(client, { retries: 3 });
 
client.get('/test') // 第一个请求失败，第二个返回“OK”
  .then(result => {
    result.data; // 'ok'
  });
 
// 允许特定于请求的配置
client
  .get('/test', {
    'axios-retry': {
      retries: 0
    }
  })
  .catch(error => { // 第一个请求失败
    error !== undefined
  });

例子：

// axios创建一个实例
let instance = axios.create({
    baseURL: config.baseURL, // api的base_url
});
axiosRetry(instance, {
    retries: 5,  //设置自动发送请求次数
    retryDelay: (retryCount) => {
        return retryCount * 500;
    }, retryCondition: (err) => {
        return err.response.status == 429  //429时重新发起请求
    }
})