umi-request 源码简析

1,710 阅读1分钟

调用流程

image.png

单个特点解析

拦截器 1 使用 (发散-promise juejin.cn/post/693793…)

image.png

use

image.png

execute

image.png

image.png

请求拦截器

// 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; });

请求前拦截

image.png

p1 = Promise.resolve()

p1 = Promise.resolve().then()

p1 = Promise.resolve().then().then()

.

.

.

p1.then() .then().then() ...

巧用reduce,类似于redux的compose

image.png

请求后拦截 见下图

缓存 & 超时处理 &请求后拦截

image.png

取消请求

1 原生xhr终止

image.png

2 cancel token 基于promise的封装实现

3 abort-controller 针对fetch