axios请求失败后多次重复请求

原创

mob649e815ecee0 2024-09-17 04:29:34 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815ecee0的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用Axios实现失败请求的多次重试

在进行HTTP请求时，我们时常会遇到请求失败的情况。为了提升用户体验，我们可以实现一个重试机制，在请求失败后自动重新请求。接下来，我将向你介绍如何使用Axios库实现请求失败后的多次重试。

流程概述

以下是实现请求重试的基本流程：

步骤	描述
1	引入axios库
2	创建一个请求函数，并配置重试逻辑
3	处理请求结果，成功则返回，失败则重试
4	在最终失败时报告错误

实现步骤

1. 引入Axios库

首先，确保你的项目中已经安装了Axios。你可以通过npm或yarn进行安装：

npm install axios

或

yarn add axios

2. 创建请求函数和重试逻辑

下面是创建请求函数的代码，其中我们设定了重试次数和请求的延迟时间：

import axios from 'axios';

// 定义一个请求函数
const fetchData = async (url, retries = 3, delay = 1000) => {
    try {
        // 尝试发送请求
        const response = await axios.get(url);
        return response.data; // 返回成功的响应数据
    } catch (error) {
        // 请求失败时
        if (retries === 0) {
            // 如果已无重试次数，则抛出错误
            throw new Error(`Request failed after 3 retries: ${error.message}`);
        }
        // 等待指定的时间后再重试
        console.log(`Retrying... (${retries} retries left)`);
        await new Promise(res => setTimeout(res, delay));
        return fetchData(url, retries - 1, delay); // 递归调用，减少重试次数
    }
};

// 用法示例
fetchData('
    .then(data => console.log('Data:', data))
    .catch(err => console.error('Error:', err));

代码注释说明

import axios from 'axios';：引入Axios库以便进行HTTP请求。
const fetchData = async (url, retries = 3, delay = 1000) => {...}：定义一个异步函数fetchData，接受请求URL、重试次数和延迟时间作为参数。
const response = await axios.get(url);：发送GET请求，并等待响应。
throw new Error(...);：抛出错误信息，如果依然请求失败且重试次数已用完。
await new Promise(res => setTimeout(res, delay));：使用Promise和setTimeout实现延迟。
return fetchData(url, retries - 1, delay);：递归调用fetchData以便于重试请求。

3. 处理请求结果

在调用函数时，我们需要处理返回的数据或错误信息：

fetchData('
    .then(data => console.log('Data:', data))
    .catch(err => console.error('Error:', err));

这里通过then来处理成功的请求，catch来处理失败的请求。

4. 完整的错误处理

确保在请求失败时我们获取到的错误信息是清晰的，这样我们可以更容易地调试问题。

状态序列图

以下是请求过程中的状态序列图，通过mermaid语法展示请求及重试的状态：

sequenceDiagram
    participant User
    participant API
    User->>API: 发起请求
    API-->>User: 返回错误
    User->>API: 尝试重试 1
    API-->>User: 返回错误
    User->>API: 尝试重试 2
    API-->>User: 返回错误
    User->>API: 尝试重试 3
    API-->>User: 返回错误
    User->>User: 报告错误