关于axios:学会了axios封装世界都是你的

我的项目中对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…不胜感激 ！