需求

请求之前拦截请求数据，响应之后拦截响应数据。

  • 可支持多个拦截器。
  • 可移除
  • 请求拦截器先添加，后执行，响应拦截器先添加先执行
    1. // 添加一个请求拦截器
    2. axios.interceptors.request.use(function (config) {
    3. // 在发送请求之前可以做一些事情
    4. return config;
    5. }, function (error) {
    6. // 处理请求错误
    7. return Promise.reject(error);
    8. });
    9. // 添加一个响应拦截器
    10. axios.interceptors.response.use(function (response) {
    11. // 处理响应数据
    12. return response;
    13. }, function (error) {
    14. // 处理响应错误
    15. return Promise.reject(error);
    16. });

    整体设计

    image.png
    形成一个Promise链式调用。

    定义拦截器管理类

    ```typescript import { ResolvedFn, RejectedFn } from “../types”

interface Interceptor { resolved: ResolvedFn rejected?: RejectedFn }

export class InterceptorManager { private interceptors: Array | null> = []

constructor() { this.interceptors = [] }

use(resolved: ResolvedFn, rejected?: RejectedFn) { this.interceptors.push({ resolved, rejected }) return this.interceptors.length - 1 }

eject(id: number) { if (this.interceptors[id]) { this.interceptors[id] = null } }

forEach(fn: (item: Interceptor) => void) { this.interceptors.forEach(interceptor => { if (interceptor) { fn(interceptor) } }) } }

  1. <a name="SROEO"></a>
  2. ## 实现整体设计，链式调用
  3. 在Axios类添加interceptors属性保存请求拦截管理器和响应拦截管理器，并且拼成一条promise链，连续调用。
  4. ```typescript
  6. import { AxiosPromise, AxiosRequestConfig, AxiosResponse, Method, RejectedFn, ResolvedFn } from '../types/index'
  7. import dispatchRequest from './dispacthRequest'
  8. import { InterceptorManager } from './interceptorManager'
  10. interface Interceptors {
  11.   request: InterceptorManager<AxiosRequestConfig>
  12.   response: InterceptorManager<AxiosResponse>
  13. }
  15. interface PromiseChain<T> {
  16.   resolved: ResolvedFn<T> | ((config: AxiosRequestConfig) => AxiosPromise<T>)
  17.   rejected?: RejectedFn
  18. }
  21. export default class Axios {
  22.   interceptors: Interceptors
  23.   constructor() {
  24.     this.interceptors = {
  25.       request: new InterceptorManager<AxiosRequestConfig>(),
  26.       response: new InterceptorManager<AxiosResponse>()
  27.     }
  28.   }
  30.   request(url: string | AxiosRequestConfig, config?: AxiosRequestConfig): AxiosPromise {
  31.     // 重载
  32.     if (typeof url === 'string') {
  33.       if (!config) {
  34.         config = {}
  35.       }
  36.       config.url = url
  37.     } else {
  38.       config = url
  39.     }
  41.     const chain: PromiseChain<any>[] = [
  42.       {
  43.         resolved: dispatchRequest,
  44.       }
  45.     ]
  47.     // 请求拦截器，先添加，后调用
  48.     this.interceptors.request.forEach(interceptor => {
  49.       chain.unshift(interceptor)
  50.     })
  51.     // 响应拦截器，先添加，先调用
  52.     this.interceptors.response.forEach(interceptor => {
  53.       chain.push(interceptor)
  54.     })
  56.     let promise = Promise.resolve(config)
  58.     while (chain.length) {
  59.       const { resolved, rejected } = chain.shift()!
  60.       promise = promise.then(resolved, rejected)
  61.     }
  63.     return promise as AxiosPromise
  64.   }
  66.   // _requestWithNoData
  67.   get(url: string, config?: AxiosRequestConfig) {
  68.     return this._requestWithNoData('get', url, config)
  69.   }
  70.   head(url: string, config?: AxiosRequestConfig) {
  71.     return this._requestWithNoData('head', url, config)
  72.   }
  73.   delete(url: string, config?: AxiosRequestConfig) {
  74.     return this._requestWithNoData('delete', url, config)
  75.   }
  76.   options(url: string, config?: AxiosRequestConfig) {
  77.     return this._requestWithNoData('options', url, config)
  78.   }
  80.   // _requestWithData
  81.   post(url: string, data?: any, config?: AxiosRequestConfig) {
  82.     return this._requestWithData('post', url, data, config)
  83.   }
  84.   put(url: string, data?: any, config?: AxiosRequestConfig) {
  85.     return this._requestWithData('put', url, data, config)
  86.   }
  87.   patch(url: string, data?: any, config?: AxiosRequestConfig) {
  88.     return this._requestWithData('patch', url, data, config)
  89.   }
  91.   _requestWithNoData(method: Method, url: string, config?: AxiosRequestConfig) {
  92.     return this.request(
  93.       Object.assign(config || {}, {
  94.         method,
  95.         url
  96.       })
  97.     )
  98.   }
  100.   _requestWithData(method: Method, url: string, data?: any, config?: AxiosRequestConfig) {
  101.     return this.request(
  102.       Object.assign(config || {}, {
  103.         method,
  104.         url,
  105.         data
  106.       })
  107.     )
  108.   }
  109. }