如何将axios的自定义适配器改写为支持长尾词查询的适配器？

本文共计678个文字，预计阅读时间需要3分钟。

目录

1.配置器需要实现的功能

1.1 Promise 和工具 1.2 响应的格式 1.3 超时设置 1.4 动态取消请求

2. 编写自定义配置器

3. 将配置器添加到 axios 中

4. 总结 1. 配置器需要实现的功能 我们在基于的基础上，需要实现以下功能：

目录

• 1. 适配器要实现的功能
• 1.1 promise 和工具
• 1.2 响应的格式
• 1.3 超时设置
• 1.4 主动取消请求
• 2. 编写自定义适配器
• 3. 将适配器添加到 axios 中
• 4. 总结

1. 适配器要实现的功能

我们在基于 axios 实现额外的数据模块时，应当与 axios 的模式进行对齐。因此在返回的数据格式上，实现的功能上尽量保持一致。

1.1 promise 和工具

所有的适配均应当实现为 Promise 方式。

而且，有些功能的实现，axios 将其下放到了适配器中自己进行实现，例如

• url 的拼接：即 baseURL 和 url 的拼接，若存在 baseURL 且 url 为相对路径，则进行拼接，否则直接使用 url；
• 参数的拼接：若是 get 请求，需要自行将 object 类型拼接为 url 参数的格式并与 url 拼接完成；

这是自己需要实现的两个基本的工具方法。

1.2 响应的格式

这里我们要注意到请求接口正常和异常的格式。

接口正常时：

const result = { status: 200, // 接口的api.prize.qq.com/v1/newsapp/answer/share/oneQ?qID=506336', options ) .then(function (response) { console.log('jsonp response', response); }) .catch(function (error) { console.error('jsonp error', error); });

使用 axios 默认的适配器发起请求。

// 使用axios默认的适配器发起请求 request('api.prize.qq.com/v1/newsapp/answer/share/oneQ?qID=506336') .then(function (response) { console.log('axios response', response); }) .catch(function (error) { console.error('axios error', error); });

4. 总结

这里，我们就已经实现了一个自定义适配器了，在满足一定条件时可以触发这个适配器。通过这个思路，我们也可以实现一个自定义的 mock 方法，例如当参数中包含format=mock时则调用 mock 接口，否则就正常请求。

以上就是如何实现axios的自定义适配器adapter的详细内容，更多关于axios自定义适配器adapter的资料请关注自由互联其它相关文章！