使用TS封装axios(一)

1.为什么要封装axios？

        大家好我是新人程序员我不是星海，今天抱着我粗浅的知识，给大家使用TS封装一个axios工具，也借此机会，磨练一下自己的技术。

        以前IOS开发的时候有一个十分流行的网络请求库，但是后来这个请求库就不再维护了，毁掉了很多没有进行封装该请求库而是进行简单封装后进行使用的项目，因为该请求库和项目的耦合度太高了，导致如果需要重构代码是十分的麻烦，所以项目基本上报废，但是有很多遵循高内聚低耦合设计理念的项目，高度封装了该请求库，将其从其他代码中解耦出来，即使请求库暂停维护后，只需要更改少量代码(进行封装的代码)就可以维持项目的平稳运行。

2.开发环境

        本人在此就不给大家进行搭建ts环境和配置webpack了，为了方便，咱们直接使用vue3+vite的官方脚手架工具，快速生成一个简单的基础框架

        在一个文件夹输入命令 npm init vue@latest

        配置项勾选使用ts即可

        搭建好项目，进入项目，npm i; npm run dev; 确认项目运行没有问题，开始进行开发。

        引入axios npm i axios

3.创建请求工具的基本框架

        

4.初始化整个项目

        准备初始化需要使用的类型

        为什么进行拓展InternalAxiosRequestConfig的类型？是为了方便进行给每个请求实例和单一的请求方法进行配置请求/响应的拦截器，极大的增加了拓展性。

        为什么不适用AxiosRequestConfig类型而对请求拦截器使用InternalAxiosRequestConfig类型，阅读axios类型声明文件的源码不难发现请求成功拦截器使用的config参数被规定为了InternalAxiosRequestConfig类型，而AxiosRequestConfig是其父类，但是两者在header上的类型有较大的冲突，以前是可以直接进行使用AxiosRequestConfig，但是当axios更新后就不能使用其进行类型声明了。

        初始化请求类

        进行创建按请求实例和配置每个实例共有的拦截器和实例定制化的拦截器

5.封装请求时使用的request

        可以在里面进行我们进行封装的给单一请求函数方便进行扩展的请求拦截器

6.在请求类中进行配置其他请求方式 并进行导出

7.进行导出请求实例对象

8.结语

        自此，我们成功将请求类给配置好了，但是这个配置类仍然有大量的问题，比如全局响应失败拦截器进行执行后，后面的实例定义的响应失败拦截器和单独的函数接口定义的响应失败拦截器就不能进行捕获错误进行执行了，那这个该怎么解决呢？欢迎大家评论区进行讨论，我们在下一期将会讨论这个问题。