100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > axios请求拦截器错误_axios请求 拦截器

axios请求拦截器错误_axios请求 拦截器

时间:2018-12-29 06:00:50

相关推荐

axios请求拦截器错误_axios请求 拦截器

一、请求方式

1、get请求

//get请求

// 发送 POST 请求

axios({

method: 'get',

url: '/user/12345',

});

2、post请求

// 发送 POST 请求

axios({

method: 'post',

url: '/user/12345',

data: {

firstName: 'Fred',

lastName: 'Flintstone'

}

});

3、request

axios.request({

method:'',

url:'',

...

})

二、请求拦截器

场景:在每次发送请求时,携带用户token方便后台做用户相关操作

在每次发送请求前,都会进入请求拦截器,我们可以在此处统一绑定上想要发送的参数,则每个请求都会自动携带token

axios.interceptors.request.use(config => {

//config是axios配置对象

//每次发送请求前都会进入此拦截器处理函数,可以在此处统一携带上token,每次请求都会自

mon['token'] = localStorage.getItem(“token”);

return config

},err => {

//请求出错的处理函数

return Promise.reject(err)

})

三、响应拦截器

场景:服务器所有接口都会返回一个错误码,比如10001,请求参数错误。 10002,用户未授权等等,我们需要在收到响应后对错误码进行相关提示。

在每次收到响应时,都会先进入响应拦截器,在分发给各个请求函数,我们可以在此处统一先处理错误码,在进入各自的响应细节函数处理res

axios.interceptors.response.use(function(res){

//收到响应后,可以先统一处理错误码

switch (res.data.code) {

case 10001: alert(‘非法操作’);

router.push({path: '/});

case 10002: alert(‘权限不足’);

......

}

return res;

},function(err){

//响应出错进入的函数

return Promise.reject(err);

});

以上就是axios拦截器的使用教程及场景.不管任何项目,只要使用的是axios发送请求,则都可以使用拦截器进行统一处理,减少冗余代码,降低二次开发及维护难度.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。