共计 2770 个字符，预计需要花费 7 分钟才能阅读完成。
我的项目中对 axios 进行二次封装
随着前端技术的倒退，网络申请这一块，越来越多的程序猿抉择应用 axios 来实现网络申请。然而单纯的 axios 插件并不能满足咱们日常的应用，因而咱们应用时，须要依据我的项目理论的状况来对 axios 进行二次封装。
接下来就我对 axios 的二次封装具体的说说，次要包含申请之前、返回响应以及应用等。
「1、申请之前」
个别的接口都会有鉴权认证（token）之类的，因而在接口的申请头外面，咱们须要带上 token 值以通过服务器的鉴权认证。然而如果每次申请的时候再去增加，不仅会大大的加大工作量，而且很容易出错。好在 axios 提供了拦截器机制，咱们在申请的拦截器中能够增加 token。
// 申请拦挡
axios.interceptors.request.use((config) => {
//…. 省略代码
config.headers.x_access_token = token
return config
}, function (error) {
return Promise.reject(error)
})
当然申请拦截器中，除了解决增加 token 以外，还能够进行一些其余的解决，具体的依据理论需要进行解决。
「2、响应之后」
申请接口，并不是每一次申请都会胜利。那么当接口申请失败的时候，咱们又怎么解决呢？每次申请的时候解决？封装 axios 对立解决？我想一个略微谋求代码品质的码农，应该都会抉择封装 axios 进行对立解决吧。axios 不仅提供了申请的拦截器，其也提供了响应的拦截器。在此处，能够获取到服务器返回的状态码，而后依据状态码进行绝对应的操作。
// 响应拦挡
axios.interceptors.response.use(function (response) {
if (response.data.code === 401) {// 用户 token 生效
// 清空用户信息
sessionStorage.user = ''sessionStorage.token =''
window.location.href = '/';// 返回登录页
return Promise.reject(msg)// 接口 Promise 返回谬误状态，错误信息 msg 可有后端返回，也能够咱们本人定义一个码 -- 信息的关系。}
if(response.status!==200||response.data.code!==200){// 接口申请失败，具体依据理论状况判断
message.error(msg);// 提醒错误信息
return Promise.reject(msg)// 接口 Promise 返回谬误状态}
return response
}, function (error) {
if (axios.isCancel(error)) {
requestList.length = 0
// store.dispatch('changeGlobalState', {loading: false})
throw new axios.Cancel('cancel request')} else {
message.error('网络申请失败, 请重试')}
return Promise.reject(error)
})
当然响应拦截器同申请拦截器一样，还能够进行一些其余的解决，具体的依据理论需要进行解决。
「3、应用 axios」
axios 应用的时候个别有三种形式：
执行 get 申请
axios.get(‘url’,{
params:{},// 接口参数
}).then(function(res){
console.log(res);// 解决胜利的函数 相当于 success
}).catch(function(error){
console.log(error)// 错误处理 相当于 error
})
执行 post 申请
axios.post(‘url’,{
data:xxx// 参数
},{
headers:xxxx,// 申请头信息
}).then(function(res){
console.log(res);// 解决胜利的函数 相当于 success
}).catch(function(error){
console.log(error)// 错误处理 相当于 error
})
axios API 通过相干配置传递给 axios 实现申请
axios({
method:’delete’,
url:’xxx’,
cache:false,
params:{id:123},
headers:xxx,
})
//——————————————//
axios({
method: ‘post’,
url: ‘/user/12345’,
data: {
firstName: 'monkey',
lastName: 'soft'}
});
间接应用 api 的形式尽管简略，然而不同申请参数的名字不一样，在理论开发过程中很容易写错或者疏忽，容易为开发造成不必要的工夫损失。
后面两种形式尽管没有参数不统一的问题，然而应用的时候，太过于麻烦。那么怎么办呢？
后面两种尽管应用过于麻烦，然而仔细观察，是能够发现有肯定的类似点，咱们便能够基于这些类似点二次封装，造成适宜咱们应用的一个申请函数。间接上代码：
/*
*url: 申请的 url
*params: 申请的参数
*config: 申请时的 header 信息
*method: 申请办法
*/
const request = function ({url, params, config, method}) {
// 如果是 get 申请 须要拼接参数
let str = ”
if (method === ‘get’ && params) {
Object.keys(params).forEach(item => {str += `${item}=${params[item]}&`
})}
return new Promise((resolve, reject) => {
axios[method](str ? (url + '?' + str.substring(0, str.length - 1)) : url, params, Object.assign({}, config)).then(response => {resolve(response.data)
}, err => {if (err.Cancel) { } else {reject(err)
}
}).catch(err => {reject(err)
})})
}
这样咱们须要接口申请的时候，间接调用该函数就好了。不论什么形式申请，传参形式都一样。
最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163 互相学习，咱们会有业余的技术答疑解惑
如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点 star: https://gitee.com/ZhongBangKe… 不胜感激！