使用TypeScript对axios进行封装

266 阅读1分钟

本文是根据coderwhy老师的思路与方法,使用TypeScript对axios进行封装

首先要明白,axios是一个对ajax封装的一个类,也就是一个class,axios里面有好多的方法,下面直接上图:

image.png

而我们要想封装一个axios,就需要创建一个axios的实例对象,来使用这个实例对象。
参照官方文档的说明可以看到具体的创建方法(图可以不太清楚,请自行去官方文档观看!):

image.png

根据官方文档的说明,我们现在大概明白了一个思路,就是首先创建一个index文件,
在里面创建axios的实例,使用一个常量接收,再导出这个常量,我们就可以使用这个实例了。
首先创建一个service-request-index.ts,引入axios:

image.png

image.png

定义一个SFRequest类,实例的类型是AxiosInstance,当外部new这个类,
创建一个实例对象时,要求传入一个config,axios.create可以创建一个axios的实例
将实例对象传入的config放入,就可以创建一个单独的axios实例
最后导出这个类:

image.png

image.png

然后我们创建一个文件service-index.ts,在里面引入刚刚导出的类和一些config配置:

image.png

image.png

现在我们就可以使用我们引入的类来创建一个axios的实例对象,最后再导出这个实例:

image.png

整个的流程思路已经打通了,现在我们在类里面写网络请求的函数,这里我写了个request请求
函数的返回值是一个pormise,将这个promise返回出去
axios实例的一些方法参考文档:

image.png

image.png

最后我们在main.ts中引入刚刚导出的实例对象来进行网络请求:

image.png