1. is What ?
axios 是一个轻量级的 HTTP 客户端。基于XMLHttpRequest服务来执行 http 请求。支持 Promise、支持浏览器端和Node.js。
2. 封装
2.1 为什么要封装 ?
axios 的 API 上手挺友好的，但是耐不住每次发起请求都要配置一些相同的属性，比如请求头、超时时间、环境前缀、错误处理等等。这不仅会浪费我们的时间，还会让我们的代码看起来十分冗余。
🌰
axios.('http://xxx.xxx/data',{
// 配置代码
method: 'GET',
timeout: 10000,
headers:{
'Content-Type': 'application/json',
Authorization: 'xxx'
}
...
}).then(data => {
// todo: 真正业务逻辑代码
console.log(data)
}, err => {
if(err.response.status === 401){
// handle authorization error
}
if(err.response.status === 402){
// handle server forbidden error
}
})
2.2 封装的一些点
「 设置接口的请求前缀 」
根据 node 环境变量来判断，用来区分开发、测试、生产环境。
if(process.env.NODE_ENV === 'devlopment'){
axios.default.baseURL. = 'https://dev.com'
}else if(process.env.NODE_ENV === 'production'){
axios.default.baseURL. = 'https://prod.com'
}
当然也可以通当前的localhost进行判断。
本地开发的时候也需要在 vue 的配置文件中进行 proxy 的配置，实现跨域，保证我们可以正常请求到数据。（需要时还要配置后端泳道，也就是我们马上要说到的请求头 header）
「 header 」
请求头的配置在一般情况下是固定的，不需要配置。特殊情况就需要了，比如在大型项目的开发中，往往一个测试环境是不够的，就会有泳道环境，那进行后端泳道的配置就需要我们带上请求头。
「 超时时间 」
没有特殊要求下，可以设置一个固定的时间。
「 请求方法 」
🌰
export function get({
url,
params = {}
}){
return new Promise((resolve,reject) =>{
axios.get(url, {...params})
.then()
.catch()
})
}
可以对常用的get、post方法进行封装，然后统一暴露出去，方便使用。
「 请求拦截器 」
可以对每个请求都拦截加上相应的 token
<-- 此处的 cookies 可以使用第三方的 cookie 管理库 -->
axios.interceptors.request.use(
config=>{
const accessToken = Cookies.get('xxx')
config.headers['access-token'] = accessToekn
}
)
「 响应拦截器 」
可以对每个响应先做一个底层操作，比如通过判断响应码来判断用户是否登录或者是否有权限访问某个页面。当然具体的响应码需要跟后端去做沟通！
axios.interceptors.response.use(
response=>{
// 状态码为 200 说明接口调用成功了
if(response.status === 200){
if(response.data.code === 511){
// code 为 511 说明为授予调取接口的权限
}
...
}
}
)
