封装的体现,封装一个方法
其实axios封装和统一管理api接口的主要目的是帮助我们简化代码，方便后期的更新和维护。本文主要介绍封装Axios的相关信息，有需要的朋友可以参考一下。
目录
前言拦截器不返回数据，但仍返回AxiosResponse对象。推荐做法：将延期支持请求添加到您的请求中。重试支持jsonp请求。支持URI版本控制。保持请求的唯一性。
前言
看到网上很多人的包Axios教程，但或多或少都有不合适的地方。以下是我给大家的最佳做法。
拦截器不要返回数据，依然返回 AxiosResponse 对象
网上的文章都让你用拦截器直接返回数据，这其实是很不合适的，会让你后续的功能很难扩展。
不推荐的做法
从“axios”导入Axios
const client=Axios.create({
//您的配置
})
client . interceptors . response . use(response={
//网上所有的做法都是让你直接返回数据。
//这使得后续的一些功能难以支持。
返回响应数据
})
导出默认客户端
推荐的做法
使用推荐的函数而不是拦截器。
从“Axios”导入Axios { AxiosRequestConfig }
const client=Axios.create({
//您的配置
})
导出异步函数请求(url: string，config？AxiosRequestConfig) {
const response=await client . request({ URL，配置})
常量结果=response.data
//你的商业判断逻辑
回送结果
}
导出默认客户端
这里有人可能会说太麻烦了。请稍等片刻，继续阅读。
为你的请求添加拓展
很多时候，我们的开发过程是这样的：
发送请求=获取数据=呈现内容。
但遗憾的是，这只是最理想的情况。在某些特殊情况下，您仍然需要处理异常或额外的支持，例如：
请求失败时，希望能自动重试3次以上才失败。在分页数据中，当一个新的请求被发送时，最后一个请求被自动中断。当第三方提供了jsonp接口，而你只能使用静态页面(ps: Axios不支持jsonp)时，发送上述场景时只能默默写代码支持，但如果不拦截Axios的响应，可以使用开源社区提供的解决方案。
支持请求重试
安装Axios-retry可以使您的Axios支持自动重试功能
从“Axios”导入Axios { AxiosRequestConfig }
从“axios-retry”导入axiosRetry
const client=Axios.create({
//您的配置
})
//安装重试插件
//请求失败时会自动重新请求，3次失败才会失败。
axiosRetry(客户端，{重试次数：3 })
导出异步函数请求(url: string，config？AxiosRequestConfig) {
const response=await client . request({ URL，配置})
常量结果=response.data
//你的商业判断逻辑
回送结果
}
//失败3次才算真正失败
const data=request( http://example . com/test )
PS: axios-retry插件支持配置单个请求。
支持 jsonp 请求
安装Axios-jsonp可以让你的Axios支持jsonp的功能。
从“Axios”导入Axios { AxiosRequestConfig }
从“axios-jsonp”导入jsonpAdapter
const client=Axios.create({
//您的配置
})
导出异步函数请求(url: string，config？AxiosRequestConfig) {
const response=await client . request({ URL，配置})
常量结果=response.data
//你的商业判断逻辑
回送结果
}
导出函数jsonp(url: string，config？AxiosRequestConfig) {
退货请求(url，{.配置，适配器：jsonpAdapter })
}
//现在可以发送jsonp的请求了
const data=jsonp( http://example . com/test-jsonp )
支持 URI 版本控制
任何有Web API开发经验的人都会遇到一个问题。如果API有重大变化，如何保证旧版本可用，发布新API？
这种情况在服务器端开发场景中并不少见，尤其是公共API，比如豆瓣API(已经失败)。
目前，主流支持三种版本控制：
描述URI版本控制版本将在请求的URI中传递(默认)标头版本控制自定义请求标头将指定版本媒体类型版本接受请求标头将指定版本URI 版本控制是指在请求的URI中传递的版本，如https://example.com/v1/route和https://example.com/v2/route.
从“Axios”导入Axios { AxiosRequestConfig }
const client=Axios.create({
//您的配置
})
client . interceptors . request . use(config={
//最简单的方案
config . URL=config . URL . replace( { version } ， v1 )
返回配置
})
//GET /api/v1/users
请求(/API/{版本}/用户)
和媒体类型模式，可以参考下面的文章来实现。
实现Web API版本控制功能嵌套版本控制
保持请求唯一
在一个支持翻页的后台表单页面中，用户点击翻页按钮，要求等待响应，但此时用户点击搜索，需要重新采集数据。支持你的情况可能是：
先返回翻页请求，返回搜索数据，数据显示正常，先返回搜索数据，返回翻页数据，数据显示异常(通常在负载均衡场景下)。因为这个原因，你希望能够自动取消最后一个请求，所以你读取了Axios的取消请求，但是很多地方需要用到，所以你可以把这个函数封装成一个独立的函数。
从“axios”导入Axios
const CancelToken=Axios。取消令牌
使用CancelToken(fetcher)导出函数{
让我们中止
功能发送(数据，配置){
Cancel() //主动取消
const cancel token=new cancel token(cancel=(abort=cancel))
返回提取器(数据，{.配置，取消令牌})
}
功能取消(message=abort) {
如果(中止){
中止(消息)
中止=空
}
}
返回[发送，取消]
}
使用
函数getUser(id: string，config？AxiosRequestConfig) {
返回请求(` api/user/${id} `，配置)
}
//包装请求函数
const [fetchUser，abort request]=with canceltoken(getUser)
//发送请求
//如果最后一个请求还没有回来，就会自动取消
fetchUser(1000 )
//通常不需要主动调用
//但是可以在组件销毁的生命周期中调用它
abortRequest()
这样在不需要自动取消的时候，可以直接使用原功能，原功能的使用不会受到影响。
后语
Axios封装其实有很多事情要做，比如全局错误处理(不能影响正常请求)等。封装不应该仅仅使用拦截器直接返回数据。
此外，请求模块应该保持独立。建议扩展AxiosRequestConfig或者对外调用做独立的函数，从而做一个独立的HTTP模块。
总结
关于打包Axios的这篇文章到此为止。有关打包Axios的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。