基于 TypeScript重构Axios-进阶功能(取消请求功能)

Axios请求取消功能其实就利用promise异步分离的方法,不暴露xhr.abort方法，让研发在函数外部调用指定方法驱动promise状态变更,从而执行请求取消的操作和抛出异常

这个功能在系统应用中常用于解决请求短时间内高并发带来的一些问题，比如我在一个搜索框中不断键入关键词,那系统就会不断的发送请求，给服务器造成压力,通常这个问题是通过防抖节流来解决，但是哪怕加入防抖节流,我们也不能保证多次请求的情况下，接口返回顺序的准确性，于是就需要abort这个功能,只要某个请求还没响应，就直接取消掉

创建CancelToken类,内部定义promise和reason字段和构建函数中的逻辑,promise和reason字段分别存储异步调用事件和取消原因,而构造函数中创建了一个promise构建函数,并将返回的promise实例赋值给resolvePromise字段,使得用户在调用CancelToken时其内部传参返回一个pending状态的promise实例

请求事件也是比较简单理解的,就是当promise状态变更时触发链式调用执行一下取消操作就行了

为满足用户多种调用方式,在CancelToken类定义多一个静态方法,方法中实例化CancelToken,拿到CancelToken返回的驱动函数,这个有点自身调自身的感觉

拓展一下，当一个携带CancelToken的请求已经被使用了,可以在请求前直接拦截,抛出异常就行