点选下方 高阶后端高阶须知”重新加入他们一同自学，整天不断进步
看许多网路上的人的PCB Axios 讲义，但多多少少都有不太最合适的点，这儿为他们所推荐我的最差课堂教学。
圣夫龙千万别回到统计数据，仍然回到 AxiosResponse 第一类
网路上的该文都让你用 圣夫龙 间接回到统计数据，此种处理方式只不过是十分欠妥的，这种会让你先期的机能极难展开开拓。
不所推荐的处理方式
import Axios from axiosconstclient = Axios.create({
// 你的实用性})
client.interceptors.response.use(response =>{
// 网路上的处理方式都是让你间接回到统计数据 // 这引致先期的许多机能无法全力支持 returnresponse.data
})
export defaultclient
拷贝标识符
所推荐的处理方式
所推荐采用表达式替代圣夫龙
import Axios, { AxiosRequestConfig } from axiosconstclient = Axios.create({
// 你的实用性})
export async function request(url: string, config?: AxiosRequestConfig){
const response = awaitclient.request({ url, …config })
constresult = response.data
// 你的业务判断逻辑 returnresult
}
export defaultclient
拷贝标识符
到这儿可能有人会说太麻烦，请稍等，继续往下看。
为你的请求添加开拓
许多时候，他们的开发流程是这种的：
发送请求 => 拿到统计数据 => 渲染内容
拷贝标识符
但可惜的是，这只是理想情况，在某些特殊情况下，你还是需要处理异常或额外的全力支持，如：
当请求失败，希望能够自动重试3次以上再失败分页统计数据中，当新的请求发出，自动中断上一次的请求第三方提供 jsonp 接口，而你又只能采用静态页时 (ps: Axios 不全力支持 jsonp)更多当发送以上场景时，你只能默默的写标识符全力支持，但如果你不拦截 Axios 的响应，那就可以采用开源社区提供的方案。
全力支持请求重试
安装 axios-retry[1]，可以让你的 Axios 全力支持自动重试的机能
import Axios, { AxiosRequestConfig } from axiosimportaxiosRetryfrom axios-retryconstclient = Axios.create({
// 你的实用性})
// 安装 retry 插件// 当请求失败后，自动重新请求，只有3次失败后才真正失败axiosRetry(client, { retries: 3})
export async function request(url: string, config?: AxiosRequestConfig){
const response = awaitclient.request({ url, …config })
constresult = response.data
// 你的业务判断逻辑 returnresult
}
// 只有3次失败后才真正失败const data = request(http://example.com/test)
拷贝标识符
PS: axios-retry 插件全力支持实用性单个请求
全力支持 jsonp 请求
安装 axios-jsonp[2]，可以让你的 Axios 全力支持 jsonp 的机能。
import Axios, { AxiosRequestConfig } from axiosimportjsonpAdapterfrom axios-jsonpconstclient = Axios.create({
// 你的实用性})
export async function request(url: string, config?: AxiosRequestConfig){
const response = awaitclient.request({ url, …config })
constresult = response.data
// 你的业务判断逻辑 returnresult
}
export function jsonp(url: string, config?: AxiosRequestConfig){
returnrequest(url, { …config, adapter: jsonpAdapter })
}
// 你现在可以发送 jsonp 的请求了const data = jsonp(http://example.com/test-jsonp)
拷贝标识符
全力支持 URI 版本控制
有开发 Web API 经验的人都会遇到一个问题，如果 API 出现重大变更的时候，如何保证旧版可用的情况下，发布新的 API?
此种情况在服务端开发场景中，只不过并不罕见，尤其是对外公开的 API，如: 豆瓣 API (已失效)。
当前主流的全力支持 3 种类型的版本控制：
类型描述URI Versioning版本将在请求的 URI 中传递（默认）Header Versioning自定义请求标头将指定版本Media Type VersioningAccept 请求的标头将指定版本URI 版本控制是指在请求的 URI 中传递的版本，例如 https://example.com/v1/route 和 https://example.com/v2/route。
import Axios, { AxiosRequestConfig } from axiosconstclient = 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 机能[3]nest versioning[4]保持请求唯一
在一个全力支持翻页的
翻页请求先回，搜索统计数据再回，统计数据显示正常搜索统计数据先回，翻页统计数据再回，统计数据显示异常（通常在负载均衡的场景中出现）为此，你希望能够自动取消上一次请求，于是你看了 Axios 的取消请求，但好多地方都需要用到，于是可以将这个机能PCB成独立的表达式。
import Axios from axiosconstCancelToken = Axios.CancelToken
export function withCancelToken(fetcher){
letabort
function send(data, config){
cancel() // 主动取消 const cancelToken = new CancelToken(cancel =>(abort = cancel))
returnfetcher(data, { …config, cancelToken })
}
function cancel(message = abort){
if(abort) {
abort(message)
abort = null}
}
return[send, cancel]
}
拷贝标识符
采用
function getUser(id: string, config?: AxiosRequestConfig){
return request(`api/user/${id}`, config)
}
// 包装请求表达式const[fetchUser, abortRequest] = withCancelToken(getUser)
// 发送请求// 如果上一次请求还没回来，会被自动取消fetchUser(1000)
// 通常不需要主动调用// 但可以在组件销毁的生命周期中调用abortRequest()
拷贝标识符
这种不需要自动取消的时候，间接采用原表达式即可，也不会影响原表达式的采用
后语
Axios PCB只不过还有许多事情可以做，比如 全局错误处理 (一样不能影响正常请求) 等，PCB也不应该只是利用圣夫龙间接回到统计数据。
另外请求模块应该保持独立，所推荐开拓 AxiosRequestConfig 或做成一个个独立的表达式，提供给外部调用，方便做成一个独立的 HTTP 模块。
关于本文
作者：zhengxs2018
https://juejin.cn/post/7053471988752318472
The End
如果你觉得这篇内容对你挺有启发，我想请你帮我三个小忙：1、点个 「在看」，让更多的人也能看到这篇内容2、关注官网 https://muyiy.cn，让他们成为长期关系3「须知」 ，重新加入他们一同自学并送你精心整理的高阶后端面试题。《
最后千万别忘了点赞呦！
祝 2022 年暴富！暴美！暴瘦！
