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

50次阅读

共计 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… 不胜感激!

正文完
 0