如何使用Typescript封装axios

本文小编为大家详细介绍“如何使用Typescript封装axios”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何使用Typescript封装axios”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。首先我们实现一个最基本的版本，实例代码如下：这里将其封装为一个类，而不是一个函数的原因是因为类可以创建多个实例，适用范围更广，封装性更强一些。首先我们封装一下拦截器，这个拦截器分为三种：类拦截器实例拦截器接口拦截器接下来我们就分别实现这三个拦截器。类拦截器比较容易实现，只需要在类中对axios.create()创建的实例调用interceptors下的两个拦截器即可，实例代码如下：我们在这里对响应拦截器做了一个简单的处理，就是将请求结果中的.data进行返回，因为我们对接口请求的数据主要是存在在.data中，跟data同级的属性我们基本是不需要的。实例拦截器是为了保证封装的灵活性，因为每一个实例中的拦截后处理的操作可能是不一样的，所以在定义实例时，允许我们传入拦截器。首先我们定义一下interface，方便类型提示，代码如下：定义好基础的拦截器后，我们需要改造我们传入的参数的类型，因为axios提供的AxiosRequestConfig是不允许我们传入拦截器的，所以说我们自定义了RequestConfig，让其继承与AxiosRequestConfig 。剩余部分的代码也比较简单，如下所示：我们的拦截器的执行顺序为实例请求→类请求→实例响应→类响应；这样我们就可以在实例拦截上做出一些不同的拦截，现在我们对单一接口进行拦截操作，首先我们将AxiosRequestConfig类型修改为RequestConfig允许传递拦截器；然后我们在类拦截器中将接口请求的数据进行了返回，也就是说在request()方法中得到的类型就不是AxiosResponse类型了。我们查看axios的index.d.ts中，对request()方法的类型定义如下：也就是说它允许我们传递类型，从而改变request()方法的返回值类型，我们的代码如下：这里还存在一个细节，就是我们在拦截器接受的类型一直是AxiosResponse类型，而在类拦截器中已经将返回的类型改变，所以说我们需要为拦截器传递一个泛型，从而使用这种变化，修改types.ts中的代码免费云主机域名，示例如下：请求接口拦截是最前执行，而响应拦截是最后执行。现在我们就来封装一个请求方法，首先是类进行实例化示例代码如下：然后我们封装一个请求方法， 来发送网络请求，代码如下：该请求方式默认为GET，且一直用data作为参数；应评论区@Pic、@Michaelee和@Alone_Error的建议，这里增加了一个取消请求；关于什么是取消请求可以参考官方文档。我们需要将所有请求的取消方法保存到一个集合（这里我用的数组，也可以使用Map）中，然后根据具体需要去调用这个集合中的某个取消请求方法。首先定义两个集合，示例代码如下：这里用的CancelRequestSource接口，我们去定义一下：这里的key是不固定的，因为我们使用url做key，只有在使用的时候才知道url，所以这里使用这种语法。首先我们改造一下request()方法，它需要完成两个工作，一个就是在请求之前将url和取消请求方法push到我们前面定义的两个属性中，然后在请求完毕后（不管是失败还是成功）都将其进行删除，实现代码如下：这里我们将删除操作进行了抽离，将其封装为一个私有方法，示例代码如下：现在我们就可以封装取消请求和取消全部请求了，我们先来封装一下取消全部请求吧，这个比较简单，只需要调用this.cancelRequestSourceList中的所有方法即可，实现代码如下：现在我们封装一下取消请求，因为它可以取消一个和多个，那它的参数就是url，或者包含多个URL的数组，然后根据传值的不同去执行不同的操作，实现代码如下：现在我们就来测试一下这个请求方法，这里我们使用www.apishop.net/提供的免费API进行测试，测试代码如下：如果在实际开发中可以将这些代码分别抽离。上面的代码在命令中输出接口请求拦截
实例请求拦截器
全局请求拦截器
实例响应拦截器
全局响应拦截器
接口响应拦截
[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]首先我们在.server/index.ts中对取消请求方法进行导出，实现代码如下：然后我们在app.vue中对其进行引用，实现代码如下：发送请求后，点击按钮即可实现对应的功能读到这里，这篇“如何使用Typescript封装axios”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。

相关推荐: C语言基础内容及分支内容有哪些

C1.%d %c %f 免费云主机域名%s %u 2.#define3.signedunsignedcharsignedunsigned4.5.6.7.8.C ====0&& || ifswitch1.elseelseifif-else2.sw…