每日前端小技巧 - 优雅处理请求重试

前言

在前端开发中，我们经常会遇到需要重试请求的场景。比如网络不稳定、服务端临时异常等情况，这时候就需要一个优雅的重试机制来提升用户体验。

实现方案

今天给大家分享两种实现请求重试的方法，分别使用 for 循环和 do-while 循环来实现。

方案一：使用 for 循环实现

async function retryWith(retryFn, retryCount = 0) {
    let error
    for(let i = 0; i < retryCount + 1; i++) {
        try {
            return await retryFn()
        } catch(err) {
            error = err
        }
    }
    throw new Error(error)
}

这种实现方式的特点：

• 通过 for 循环控制重试次数
• 成功则直接返回结果，失败则继续重试
• 所有重试都失败后才抛出最后一次的错误

方案二：使用 do-while 循环实现

async function retryWith(retryFn, retryCount = 0) {
    let error
    let count = 0
    do {
        try {
            return await retryFn()
        } catch(err) {
            error = err
        }
    } while(count++ < retryCount)
    throw new Error(error)
}

这种实现方式的特点：

• 通过 do-while 循环控制重试次数
• 成功则直接返回结果，失败则继续重试
• 所有重试都失败后才抛出最后一次的错误

示例

const fetchUserData = async (userId) => {
    try {
        // 最多重试2次
        const result = await retryWith(
            () => axios.get(`/api/users/${userId}`),
            2
        )
        return result.data
    } catch (error) {
        console.error('获取用户数据失败:', error)
        throw error
    }
}

总结

以上两种实现方式都可以实现请求重试，具体使用哪种方式取决于你的业务需求和个人偏好。