基于 TypeScript重构Axios-进阶功能(配置化管理)

64 阅读1分钟

Axios配置化其实就利用策略模式覆盖源码中对某些属性的默认设置,使得研发可以按需定义特定属性的值

在Axios中先定义好default基础配置,用于奠定公共的请求头等参数并用于后续拓展

image.png

编写配置化管理模块的三种策略函数

code.png

将不同的配置参数指向不同的策略函数

code1.png

编写配置化管理主要代码逻辑

code2.png

经过合并后的配置'headers'是一个复杂对象且多了common、post、get等属性,但是这些属性中的值才是我们要添加到headers中的字段,所以在这里对配置后的参数进行规范化处理,从不同的模块中将所需字段提并出来删掉多余的层级

image.png

code3.png

接下来就是在axios对象中提供一个传参入口,用于接受开发传入的参数

image.png

最后就是在创建axios构造函数中定义传参字段

image.png

最后在请求数据处理总成事件中进行应用

image.png