接口拓展其实就是利用工厂函数+混合对象实现的一个函数,但是该函数结合了自身及其他目标对象的实例和原型属性
针对接口拓展分成了以下三个步骤:
- 定义接口类型
- 创建Aios类
- 基本模块化编程提炼核心代码
- 实现混合对象
1.定义接口类型
- 在types/index文件中给定义类型接口Axios(代码描述了axios的公共代码)
- 最后定义AxiosInstance混合对象类型，继承Axios对象的属性类型和实例类型
2.创建Aios类
- 在src文件夹下创建文件夹core，存放Axios核心代码
- 在文件见core下创建Axios.ts文件
- 结合接口类型写Axios类的主体代码(代码中含可复用模块_requestMethodWithoutData,_requestMethodWithData)
3. 基本模块化编程提炼核心代码
从第2点的代码中发现request方法的功能跟最初定义的axios函数功能基本一致，基于模块化编程思想，单独抽离原axios部分的代码并在core文件夹下创建dispatchRequest方法进行迁移，另外把xhr.ts也迁移到core目录下, 在core目录归一化代码作用
4. 实现混合对象
这个是axios混合对象实现的核心,也比较简单,就是在这个对象是函数的基础上还要包括Axios类的所有原型属性和实例属性,这里有两个要点
- 在helpers目录/util.ts文件下创建辅助函数extend,采用交叉类型+类型断言规范类型
- 采用
for...in方法,for...in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性,如Object和Array设置了不可枚举配置则不可遍历,该规则可结合Vue2数据响应式源码(object.defineProperty)理解,好久之前写过,链接:juejin.cn/post/712135… 3.在axios.ts创建工厂函数,调用extend辅助函数实现axios混合对象
