1、 axios的二次封装思路
axios是一个基于 promise 的 HTTP 库(同时支持浏览器端和Node发起网络请求)，也是目前Vue、react框架用的最多的请求库,对http请求有着很有的封装，网上关于封装的demo也有很多，但是每个人面对的场景不一样导致封装的代码风格不一，我这里想总结下封装的思路。
2、 axios请求分析
这里先写一个简单的常用demo
// Send a POST request
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
我们平时也经常写这样的一个请求，我这边还是简单的分析一下，这里我们需要提供三个参数(method, url, data),即请求的方法(get/post/...),、请求的路径、请求时携带的参数。
当请求成功的时候， 这里面的请求成功可以简单的理解为服务端返回的状态码是200，然后我们可以依据后端返回的状态码来处理数据。
当网络请求被捕捉到错误时候，会触发catch的回调函数，执行一些网络错误处理。
3、 基本的封装思路
发起请求 => request拦截 => respone拦截 => checkstatus(网络状态码异常) => checkCode(后端返回的状态码)
axios提供了interceptors这个API，可以对请求和响应进行拦截处理
// 一、request请求拦截
axios.interceptors.request.use((config) => {
console.log('请求拦截')
console.log(config)
return config
}, (error) => {
return Promise.reject(error)
})
// 二、respone响应拦截
axios.interceptors.response.use((response) => {
console.log('响应拦截')
console.log(response)
return response
}, (error) => {
return Promise.reject(error)
})
在请求的拦截中我们可以来按照我们所需的request header 里面对config进行配置即可。
在对响应的拦截中我们也可以对返回的respone进行处理，这里一个常见的思路是首先对网络返回的状态码checkstatus进行异常处理，而后对于后端返回给我们的状态码和错误消息进行处理，最后让我们的页面请求用到axios的时候只负责处理正确的请求即可，来达到二次封装的目的
4、 总结
最后我将axios的请求封装了一个函数，如下：
/**
* 封装请求
* @url: String 请求地址
* @method: String 请求方法
* @params: Object 请求参数
*/
export function request(url, method, params) {
return new Promise((resolve, reject) => {
axios({
method: method,
url: url,
data: params
}).then(res => {
// 这里我们和后端约定当返回的状态码为0的时候ok
if(res.data.retcode === 0) {
resolve(res.data)
}else {
Message({
message: '请联系开发者',
type: 'error'
})
reject(res.data)
}
}).catch(err => {
Message({
message: '请联系开发者',
type: 'error'
})
reject(err)
console.log(err)
})
})
}
那我们在使用请求的时候的时候只需要引入这里文件，然后调用request这个方法就可以了，如下
request(url, 'post', params).then(data => {
console.log(data）
}).catch(err => {
console.log(err)
})
由于这里的网络异常和后端返回的状态码异常我已经在request这里函数中做了统一的处理，那么我们只需要在request处理正确返回的数据即可，完！