当前位置:首页 > 编程笔记 > 正文
已解决

axios 实现请求重试

来自网友在路上 188888提问 提问时间:2023-11-03 08:35:14阅读次数: 88

最佳答案 问答题库888位专家为你答疑解惑

在这里插入图片描述

前景提要:
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 httpRequest from "..";
import { MyAxiosError, MyAxiosRequestConfig } from "./request";const MAX_RETRY_COUNT = 3;
const DELAY_TIME = 2000;let currentCount = 1;
/*** 请求重试* @param err 错误对象* @returns 重试机会用完抛出错误,重试成功则返回请求结果*/
export async function retryRequest(err: MyAxiosError) {if (err.config.retry === false) throw err;if (err.message === "canceled") throw err; // 过滤手动取消请求的情况const config = err.config as MyAxiosRequestConfig;if (MAX_RETRY_COUNT >= currentCount && config) {console.log(`重试${currentCount}次...`);currentCount++;await sleep(DELAY_TIME);const res = await httpRequest.getInstance().request({ ...config });return Promise.resolve(res);}console.log("重试次数已用完...");currentCount = 0;throw err;
}/*** 延迟后续代码执行的工具函数,以同步代码阻塞的方式实现延迟:await sleep()* @param delayTime 延迟时间* @returns Promise*/
export function sleep(delayTime: number = 1000) {return new Promise(resolve => setTimeout(resolve, delayTime));
}
查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"axios 实现请求重试":http://eshow365.cn/6-30958-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!