看很多网上的人的封装 Axios 教程，但或多或少都有不太合适的点，这里为大家推荐我的最佳实践。
拦截器不要返回数据，依然返回 AxiosResponse 对象
网上的文章都让你用 拦截器 直接返回数据，这种作法其实是非常不妥的，这样会让你后续的功能很难进行拓展。
不推荐的做法
importAxiosfrom'axios'constclient=Axios.create({//你的配置})client.interceptors.response.use(response=>{//网上的做法都是让你直接返回数据//这导致后续的一些功能难以支持returnresponse.data})exportdefaultclient推荐的做法
推荐使用函数代替拦截器
importAxios,{AxiosRequestConfig}from'axios'constclient=Axios.create({//你的配置})exportasyncfunctionrequest(url:string,config?:AxiosRequestConfig){constresponse=awaitclient.request({url,...config})constresult=response.data//你的业务判断逻辑returnresult}exportdefaultclient到这里可能有人会说太麻烦，请稍等，继续往下看。
为你的请求添加拓展
很多时候，我们的开发流程是这样的：
发送请求=>拿到数据=>渲染内容
但可惜的是，这只是理想情况，在某些特殊情况下，你还是需要处理异常或额外的支持，如：
当请求失败，希望能够自动重试3次以上再失败
分页数据中，当新的请求发出，自动中断上一次的请求
第三方提供 jsonp 接口，而你又只能使用静态页时 (ps: Axios 不支持 jsonp)
更多
当发送以上场景时，你只能默默的写代码支持，但如果你不拦截 Axios 的响应，那就可以使用开源社区提供的方案。
支持请求重试
安装 axios-retry，可以让你的 Axios 支持自动重试的功能
importAxios,{AxiosRequestConfig}from'axios'importaxiosRetryfrom'axios-retry'constclient=Axios.create({//你的配置})//安装retry插件//当请求失败后，自动重新请求，只有3次失败后才真正失败axiosRetry(client,{retries:3})exportasyncfunctionrequest(url:string,config?:AxiosRequestConfig){constresponse=awaitclient.request({url,...config})constresult=response.data//你的业务判断逻辑returnresult}//只有3次失败后才真正失败constdata=request('http://example.com/test')PS: axios-retry 插件支持配置单个请求
支持 jsonp 请求
安装 axios-jsonp，可以让你的 Axios 支持 jsonp 的功能。
importAxios,{AxiosRequestConfig}from'axios'importjsonpAdapterfrom'axios-jsonp'constclient=Axios.create({//你的配置})exportasyncfunctionrequest(url:string,config?:AxiosRequestConfig){constresponse=awaitclient.request({url,...config})constresult=response.data//你的业务判断逻辑returnresult}exportfunctionjsonp(url:string,config?:AxiosRequestConfig){returnrequest(url,{...config,adapter:jsonpAdapter})}//你现在可以发送jsonp的请求了constdata=jsonp('http://example.com/test-jsonp')支持 URI 版本控制
有开发 Web API 经验的人都会遇到一个问题，如果 API 出现重大变更的时候，如何保证旧版可用的情况下，发布新的 API?
这种情况在服务端开发场景中，其实并不罕见，尤其是对外公开的 API，如: 豆瓣 API (已失效)。
当前主流的支持 3 种类型的版本控制：
URI 版本控制 是指在请求的 URI 中传递的版本，例如 https://example.com/v1/route 和 https://example.com/v2/route。
importAxios,{AxiosRequestConfig}from'axios'constclient=Axios.create({//你的配置})client.interceptors.request.use(config=>{//最简单的方案config.url=config.url.replace('{version}','v1')returnconfig})//GET/api/v1/usersrequest('/api/{version}/users')Header 和 Media Type 模式，可以参考如下文章来实现
实现 Web API Versioning 功能
nest versioning
保持请求唯一
在一个支持翻页的后台表格页，一个用户击翻页按钮，请求发出等待响应，但用户这时点击搜索，需要重新获取数据，支持你的情况可能是：
翻页请求先回，搜索数据再回，数据显示正常
搜索数据先回，翻页数据再回，数据显示异常（通常在负载均衡的场景中出现）
为此，你希望能够自动取消上一次请求，于是你看了 Axios 的取消请求，但好多地方都需要用到，于是可以将这个功能封装成独立的函数。
importAxiosfrom'axios'constCancelToken=Axios.CancelTokenexportfunctionwithCancelToken(fetcher){letabortfunctionsend(data,config){cancel()//主动取消constcancelToken=newCancelToken(cancel=>(abort=cancel))returnfetcher(data,{...config,cancelToken})}functioncancel(message='abort'){if(abort){abort(message)abort=null}}return[send,cancel]}使用
functiongetUser(id:string,config?:AxiosRequestConfig){returnrequest(`api/user/${id}`,config)}//包装请求函数const[fetchUser,abortRequest]=withCancelToken(getUser)//发送请求//如果上一次请求还没回来，会被自动取消fetchUser('1000')//通常不需要主动调用//但可以在组件销毁的生命周期中调用abortRequest()这样不需要自动取消的时候，直接使用原函数即可，也不会影响原函数的使用
后语
Axios 封装其实还有很多事情可以做，比如 全局错误处理 (一样不能影响正常请求) 等，封装也不应该只是利用拦截器直接返回数据。
另外请求模块应该保持独立，推荐拓展 AxiosRequestConfig 或做成一个个独立的函数，提供给外部调用，方便做成一个独立的 HTTP 模块。