如何在前端项目中优雅地实现异步请求重试机制

正文

背景介绍

在现代Web开发中，异步请求是与后端进行数据交互的重要手段之一。但是，由于网络环境复杂多变，有时候请求可能会因为各种原因失败。如果直接向用户显示错误信息，不仅影响用户体验，也可能导致关键业务流程中断。因此，在遇到请求失败时，尝试重新发起请求是一种常见的解决策略。

实现思路

我们的目标是创建一个可以重复尝试执行给定异步函数的功能，并且能够根据设定的最大重试次数决定是否继续尝试。这里我们将展示一个简单的实现方法，适用于任何需要重试逻辑的场景。

示例代码

以下是基于上述需求编写的示例代码：

javascript 复制代码

javascript
深色版本
const example = async () => {
    // 模拟第一个异步请求函数
    function asyncRequest() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (Math.random() < 0.1) { // 10% 成功率模拟
                    resolve({ data: '请求成功', code: 200, msg: '请求成功' });
                } else {
                    reject(new Error('请求失败'));
                }
            }, 1000);
        });
    }

    function add() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve({ data: '添加成功', code: 200, msg: '添加成功' });
            }, 1000);
        });
    }

    // 带有重试机制的请求函数
    async function useRequest(callfn, interval, maxRetries) {
        let retries = 0;

        const execute = () => {
            return new Promise(async (resolve) => {
                try {
                    const result = await callfn();
                    console.log('✅ 请求成功:', result);
                    resolve(true);
                } catch (error) {
                    if (retries < maxRetries) {
                        console.warn(`❌ 请求失败，第 ${retries + 1} 次重试...`, error.message);
                        retries++;
                        setTimeout(() => {
                            resolve(execute()); // 继续重试
                        }, interval);
                    } else {
                        console.error('❌ 达到最大重试次数，停止请求');
                        resolve(false);
                    }
                }
            });
        };

        return await execute(); // 返回最终结果
    }

    const res = await useRequest(asyncRequest, 1000, 5);
    console.log('最终结果res', res);
    if (!res) {
        // 多次请求失败，弹出错误提示
        alert("请求失败，请稍后再试");
        return;
    }
    // 请求成功，执行后续逻辑
    const data = await add();
    console.log(data);
};

example();

关键点解析

useRequest 函数 ：这是一个通用的重试逻辑封装，接受三个参数：callfn（要调用的异步函数）、interval（每次重试之间的等待时间）以及 maxRetries（最大重试次数）。它通过递归的方式实现了重试逻辑。
错误处理：当请求失败时，首先检查是否已经超过了最大重试次数。如果没有，则等待一段时间后再次尝试；否则，停止重试并返回失败状态。
链式操作 ：一旦初始请求成功，程序将继续执行后续的逻辑（如这里的 add 方法）。

结论

通过上述方法，我们可以轻松地为任何异步请求添加重试机制，从而提高应用程序的稳定性和用户体验。当然，实际项目中可能还需要考虑更多的细节，比如并发控制、取消请求等高级特性，但基本原理都是类似的。希望这篇文章能帮助你更好地理解如何在前端项目中处理异步请求及其异常情况。