JavaScript 前端 typescript axios 实现请求重试

前景提要： ts 简易封装 axios，统一 API 实现在 config 中配置开关拦截器

请求重试的核心是可以重放请求，具体实现就是在 axios 中，拿到当前请求的 config 对象，再用 axios 实例，就能重放请求。

在无感刷新 token 中，当 access token 过期，使用 refresh token 刷新后，就需要再次对业务接口重放请求。

上面是一种请求重试的场景，一般情况下也不需要重试，所以我们这里讲的请求重试，指的都是请求网络错误的情况下需要重试。比如断网了，然后重试。而不是因为接口返回 code 如 401 就重试。因为接口返回 401，从网络层面上讲，这是没有失败的，http 状态码是 200，返回 401 只是业务失败。比起断网，更常见的网络错误下需要重试的是请求超时。

通过错误拦截器实现请求重试。整个请求过程是一个递归。

第一次请求失败，触发全局错误拦截，然后一路抛出错误，触发到重试的错误拦截器。判断还有重试次数后，拿到同一个实例重放请求。注意此时第一次请求并未结束，this.instance.request 方法依旧在等待结果。如果请求依旧失败，则触发第二次请求的全局错误拦截，最后再次触发重试。如果第二次请求重试成功了，此时就拿到了请求结果。并且为了让结果最终被第一次请求捕获，需要在错误拦截器中抛出 fulfilled 状态的 promise 携带结果。当请求次数用完，则错误拦截器继续抛出错误对象，触发第一次请求的 request 方法的 catch 代码块。宣告整个请求失败。

注意：

一定要以同一个 axios 实例重新发起请求，因为本质是递归，换个一个实例就拿不到重试成功后的请求结果了。

并且还需要在这个重试的错误拦截器中返回一个 fulfilled 状态的 promise，让第一次请求的实例方法捕获。

return Promise.resolve(res); 或 Promise.rejected(234); 都表示返回一个确定了状态的 promise，然后这个 promise 中携带了数据（就是参数）。

import httpRequ

精彩内容

评论可见，请评论后查看内容，谢谢！！！