axios请求拦截器和响应拦截器

axios里面可以设置拦截器 ,在请求发送之前做一些事情;
拦截器分【请求拦截器】和【响应拦截器】
参考地址:https://www.jb51.net/article/150014.htm
参考的地址:https://www.jianshu.com/p/7bc7654d4574

请求拦截器的实际应用场景
在进行鉴权的时候;我们每个接口都需要携带token;
难道每次我们都需要手动拼接token;
这个时候拦截器就很有用了;
这时候就可以用拦截器来使token自动增加


// 首先我们看下请求拦截器的写法;在请求或响应被 then 或 catch 处理前拦截它们。
axios.interceptors.request.use((config)=>{
	console.log("--",config);
	config.baseURL="https://193.121.12.121:8999/";
	
                if (token) {  // 判断是否存在token,如果存在的话,则每个http header都加上token
                     config.headers.myAuthorization = mytoken;
	            // config.headers['Authorization'] = token;
                } 
	       if(!config.hasOwnProperty('showError')){
	            config.showError = true
               }
	return config;
},(err)=>{
    console.log(error)
     // 发生错误做的一些事情
      return Promise.reject(error);
})



// 添加响应拦截器
axios.interceptors.response.use(function (res) {
  // 对响应数据做点什么
   if (res&&res.data&&res.data.success) {
                return  res.data
   }else{
	if(res.config.showError) {
                  //如何请求失败,开启了错误提示;进行提示
                    window.$toast(res.data.msg)
                }
                return Promise.reject(res.data)
  }}, function (error) {
     // 对响应错误做点什么;没有权限401,去登录界面
     if(error.response.status === 401) {
            window.$toast('登录超时')
            setTimeout(() => {
                uni.switchTab({  
                    url: '/pages/home/home'
                })
            },1000)
        }else if(error.response.status === 403) {
            window.$toast('暂无权限')
        }else {
            window.$toast('网络错误')
        }

  return Promise.reject(error);
 });

export default axios
import request from './common'
/** 
{请求参数} data   
@param {
showError: 是否隐藏错误提醒
 } utils 
*/


export function getUserInfo(data, utils) {
	return request({
		url: 'xxx/xx/user',
		method: 'get',
		data,
		...utils
	})
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值