东莞订制网站建设,wordpress栏目title,长沙外贸网站,长治网站制作报价拦截器设计与实现 #需求分析 我们希望能对请求的发送和响应做拦截#xff0c;也就是在发送请求之前和接收到响应之后做一些额外逻辑。 我们希望设计的拦截器的使用方式如下#xff1a; // 添加一个请求拦截器
axios.interceptors.request.use(function (config) { // 在发送请… 拦截器设计与实现 #需求分析 我们希望能对请求的发送和响应做拦截也就是在发送请求之前和接收到响应之后做一些额外逻辑。 我们希望设计的拦截器的使用方式如下 // 添加一个请求拦截器
axios.interceptors.request.use(function (config) { // 在发送请求之前可以做一些事情 return config; }, function (error) { // 处理请求错误 return Promise.reject(error); }); // 添加一个响应拦截器 axios.interceptors.response.use(function (response) { // 处理响应数据 return response; }, function (error) { // 处理响应错误 return Promise.reject(error); }); 在 axios 对象上有一个 interceptors 对象属性该属性又有 request 和 response 2 个属性它们都有一个 use 方法use 方法支持 2 个参数第一个参数类似 Promise 的 resolve 函数第二个参数类似 Promise 的 reject 函数。我们可以在 resolve 函数和 reject 函数中执行同步代码或者是异步代码逻辑。 并且我们是可以添加多个拦截器的拦截器的执行顺序是链式依次执行的方式。对于 request 拦截器后添加的拦截器会在请求前的过程中先执行对于 response 拦截器先添加的拦截器会在响应后先执行。 axios.interceptors.request.use(config { config.headers.test 1 return config }) axios.interceptors.request.use(config { config.headers.test 2 return config }) 此外我们也可以支持删除某个拦截器如下 const myInterceptor axios.interceptors.request.use(function () {/*...*/}) axios.interceptors.request.eject(myInterceptor) #整体设计 我们先用一张图来展示一下拦截器工作流程 整个过程是一个链式调用的方式并且每个拦截器都可以支持同步和异步处理我们自然而然地就联想到使用 Promise 链的方式来实现整个调用过程。 在这个 Promise 链的执行过程中请求拦截器 resolve 函数处理的是 config 对象而相应拦截器 resolve 函数处理的是 response 对象。 在了解了拦截器工作流程后我们先要创建一个拦截器管理类允许我们去添加 删除和遍历拦截器。 #拦截器管理类实现 根据需求axios 拥有一个 interceptors 对象属性该属性又有 request 和 response 2 个属性它们对外提供一个 use 方法来添加拦截器我们可以把这俩属性看做是一个拦截器管理对象。use 方法支持 2 个参数第一个是 resolve 函数第二个是 reject 函数对于 resolve 函数的参数请求拦截器是 AxiosRequestConfig 类型的而响应拦截器是 AxiosResponse 类型的而对于 reject 函数的参数类型则是 any 类型的。 根据上述分析我们先来定义一下拦截器管理对象对外的接口。 #接口定义 types/index.ts export interface AxiosInterceptorManagerT { use(resolved: ResolvedFnT, rejected?: RejectedFn): number eject(id: number): void } export interface ResolvedFnTany { (val: T): T | PromiseT } export interface RejectedFn { (error: any): any } 这里我们定义了 AxiosInterceptorManager 泛型接口因为对于 resolve 函数的参数请求拦截器和响应拦截器是不同的。 #代码实现 import { ResolvedFn, RejectedFn } from ../types interface InterceptorT { resolved: ResolvedFnT rejected?: RejectedFn } export default class InterceptorManagerT { private interceptors: ArrayInterceptorT | null constructor() { this.interceptors [] } use(resolved: ResolvedFnT, rejected?: RejectedFn): number { this.interceptors.push({ resolved, rejected }) return this.interceptors.length - 1 } forEach(fn: (interceptor: InterceptorT) void): void { this.interceptors.forEach(interceptor { if (interceptor ! null) { fn(interceptor) } }) } eject(id: number): void { if (this.interceptors[id]) { this.interceptors[id] null } } } 我们定义了一个 InterceptorManager 泛型类内部维护了一个私有属性 interceptors它是一个数组用来存储拦截器。该类还对外提供了 3 个方法其中 use 接口就是添加拦截器到 interceptors中并返回一个 id 用于删除forEach 接口就是遍历 interceptors 用的它支持传入一个函数遍历过程中会调用该函数并把每一个 interceptor 作为该函数的参数传入eject 就是删除一个拦截器通过传入拦截器的 id 删除。 #链式调用实现 本小节需要你对 Promise 掌握和理解可以前往 mdn 学习。 当我们实现好拦截器管理类接下来就是在 Axios 中定义一个 interceptors 属性它的类型如下 interface Interceptors {request: InterceptorManagerAxiosRequestConfig response: InterceptorManagerAxiosResponse } export default class Axios { interceptors: Interceptors constructor() { this.interceptors { request: new InterceptorManagerAxiosRequestConfig(), response: new InterceptorManagerAxiosResponse() } } } Interceptors 类型拥有 2 个属性一个请求拦截器管理类实例一个是响应拦截器管理类实例。我们在实例化 Axios 类的时候在它的构造器去初始化这个 interceptors 实例属性。 接下来我们修改 request 方法的逻辑添加拦截器链式调用的逻辑 core/Axios.ts interface PromiseChain {resolved: ResolvedFn | ((config: AxiosRequestConfig) AxiosPromise) rejected?: RejectedFn } request(url: any, config?: any): AxiosPromise { if (typeof url string) { if (!config) { config {} } config.url url } else { config url } const chain: PromiseChain[] [{ resolved: dispatchRequest, rejected: undefined }] this.interceptors.request.forEach(interceptor { chain.unshift(interceptor) }) this.interceptors.response.forEach(interceptor { chain.push(interceptor) }) let promise Promise.resolve(config) while (chain.length) { const { resolved, rejected } chain.shift()! promise promise.then(resolved, rejected) } return promise } 首先构造一个 PromiseChain 类型的数组 chain并把 dispatchRequest 函数赋值给 resolved 属性接着先遍历请求拦截器插入到 chain 的前面然后再遍历响应拦截器插入到 chain 后面。 接下来定义一个已经 resolve 的 promise循环这个 chain拿到每个拦截器对象把它们的 resolved 函数和 rejected 函数添加到 promise.then 的参数中这样就相当于通过 Promise 的链式调用方式实现了拦截器一层层的链式调用的效果。 注意我们拦截器的执行顺序对于请求拦截器先执行后添加的再执行先添加的而对于响应拦截器先执行先添加的后执行后添加的。 #demo 编写 在 examples 目录下创建 interceptor 目录在 interceptor 目录下创建 index.html: !DOCTYPE html
html langen head meta charsetutf-8 titleInterceptor example/title /head body script src/__build__/interceptor.js/script /body /html 接着创建 app.ts 作为入口文件 import axios from ../../src/indexaxios.interceptors.request.use(config { config.headers.test 1 return config }) axios.interceptors.request.use(config { config.headers.test 2 return config }) axios.interceptors.request.use(config { config.headers.test 3 return config }) axios.interceptors.response.use(res { res.data 1 return res }) let interceptor axios.interceptors.response.use(res { res.data 2 return res }) axios.interceptors.response.use(res { res.data 3 return res }) axios.interceptors.response.eject(interceptor) axios({ url: /interceptor/get, method: get, headers: { test: } }).then((res) { console.log(res.data) }) 该 demo 我们添加了 3 个请求拦截器添加了 3 个响应拦截器并删除了第二个。运行该 demo 我们通过浏览器访问我们发送的请求添加了一个 test 的请求 header它的值是 321我们的响应数据返回的是 hello经过响应拦截器的处理最终我们输出的数据是 hello13。 至此我们给 ts-axios 实现了拦截器功能它是一个非常实用的功能在实际工作中我们可以利用它做一些需求如登录权限认证。 我们目前通过 axios 发送请求往往会传入一堆配置但是我们也希望 ts-axios 本身也会有一些默认配置我们把用户传入的自定义配置和默认配置做一层合并。其实大部分的 JS 库都是类似的玩法。下面一章我们就来实现这个 feature。 转载于:https://www.cnblogs.com/QianDingwei/p/11403923.html
