基于 TS 实现 axios（五）

今天这一章节主要介绍 拦截器

目录结构：

拦截器

先问什么是拦截器？

可以从字面意思理解大概就是拦截数据，主要运用在发起请求前或请求返回数据后对数据进行处理，可以运用在登录、处理一些格式化数据之类的。

按照请求的时间不同分为：请求前的 请求拦截器，请求后的 响应拦截器

在 types/index.ts 中新增代码

// ...
// 最后加入
export interface AxiosInterceptorManage<T>{
    use(resolved:ResolvedFn<T>,rejected?:RejectedFn):number,

    eject(id:number):void
}

export interface ResolvedFn<T>{
    (val:T) : T | Promise<T>
}

export interface RejectedFn {
    (error: any) : any,
}

其中 <T> 表示 泛型 （之前说过的）

新增文件 core/InterceptorManager.ts

import {RejectedFn,ResolvedFn} from '../types/index';

interface Interceptor<T>{
    resolved:ResolvedFn<T>,
    rejected?:RejectedFn,

}

export default class InterceptorManager<T>{
    private interceptors:Array<Interceptor<T> | null>

    constructor(){
        this.interceptors = []
    }
    use(resolved:ResolvedFn<T>,rejected?:RejectedFn):number{
        this.interceptors.push({
            resolved,
            rejected,
        })
        return this.interceptors.length -1;
    }

    forEach(fn:(interceptor: Interceptor<T>) => void) : void {
        this.interceptors.forEach(interceptor => {
            if(interceptor !== null) {
                fn(interceptor);
            }
        })
    }

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

定义一个