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

前言

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

实现方案

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

方案一:使用 for 循环实现

javascript 复制代码
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 循环实现

javascript 复制代码
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 循环控制重试次数
  • 成功则直接返回结果,失败则继续重试
  • 所有重试都失败后才抛出最后一次的错误

示例

javascript 复制代码
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
    }
}

总结

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

相关推荐
妮妮喔妮15 分钟前
图片上传 el+node后端+数据库
javascript·数据库·vue.js
求知若渴,虚心若愚。3 小时前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj4 小时前
最新的前端技术和趋势(2025)
前端
一只小风华~4 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟5 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
仰望星空的凡人6 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
若梦plus7 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉7 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A7 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6667 小时前
React与Rudex的合奏
前端·react.js·前端框架