调用流程
单个特点解析
拦截器 1 使用 (发散-promise juejin.cn/post/693793…)
use
execute
请求拦截器
// request拦截器, 改变url 或 options.
request.interceptors.request.use((url, options) => {
return {
url: ${url}&interceptors=yes,
options: { ...options, interceptors: true },
};
});
// response拦截器, 处理response request.interceptors.response.use((response, options) => { const contentType = response.headers.get('Content-Type'); return response; });
请求前拦截
p1 = Promise.resolve()
p1 = Promise.resolve().then()
p1 = Promise.resolve().then().then()
.
.
.
p1.then() .then().then() ...
巧用reduce,类似于redux的compose
请求后拦截 见下图
缓存 & 超时处理 &请求后拦截
取消请求
1 原生xhr终止
2 cancel token 基于promise的封装实现
3 abort-controller 针对fetch