网站建设的职业叫什么,设计模板用什么软件,怎么建立图片文件,网络营销课程总结1500字前景提要#xff1a; ts 简易封装 axios#xff0c;统一 API 实现在 config 中配置开关拦截器
请求重试的核心是可以重放请求#xff0c;具体实现就是在 axios 中#xff0c;拿到当前请求的 config 对象#xff0c;再用 axios 实例#xff0c;就能重放请求。
在无感刷新…
前景提要 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));
}
