axios拦截器



// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
    var token = sessionStorage.getItem('token');
    if(token){
      // 判断是否存在token,如果存在的话,则每个http header都加上token
       axios.default.headers.Authorization = 'token ${store.state.token}';
     }
  // 在发送请求之前序列化数据
  if (config.method  === 'post') {
    config.data = qs.stringify(config.data);
  }else if(config.method  === 'get'){
    config.params = {
      redirect_url: window.location.href.split('#')[1],
      ...config.params
    }
  }
  return config;
}, (error) => {
  _.toast('错误的传参', 'fail');
  return Promise.reject(error);
});

// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use(response => {
  if (response.data.code == 1107) {   //相应状态码
    if (response.data.data.type === 1) {
      //判断返回类型是1跳转登录页面  
      router.push({path: '/px-login', query: {errorInfo: 'login'}});
    } else if (response.data.data.type === 2) {
      window.location.href = response.data.data.url;
    }
  } else {
    //router.push({path: '/errorDev', query: {errMsg: response.data.errMsg}});
  }
  return response;
}, error => {
  return Promise.reject(error);
});

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Axios 拦截是一种在请求发送和响应返回之前,对请求和响应进行处理的机制。Axios 拦截可以用于添加请求头、验证请求数据、对响应数据进行处理等场景。 Axios拦截是基于 Promise 实现的,每个拦截都是一个 Promise,其 resolve 函数接收一个 config 对象或 response 对象作为参数。Axios 支持两种类型的拦截:请求拦截和响应拦截。 请求拦截会在请求发送之前执行,响应拦截会在响应返回之后执行。请求拦截可以用于添加请求头、验证请求数据等操作,响应拦截可以用于对响应数据进行处理。 Axios拦截原理可以简单概括为: 1. 创建一个 Axios 实例,并设置默认配置。 2. 将请求和响应拦截添加到实例中。 3. 当发送请求时,按照顺序执行请求拦截中的代码。 4. 如果请求拦截中发生了错误,Promise.reject() 方法会直接返回错误信息。 5. 如果请求拦截中没有发生错误,Axios 会将最终的请求参数发送给服务。 6. 当服务返回响应时,Axios 会按照顺序执行响应拦截中的代码。 7. 如果响应拦截中发生了错误,Promise.reject() 方法会返回错误信息。 8. 如果响应拦截中没有发生错误,Axios 会将最终的响应结果返回给调用者。 总之,Axios 拦截的原理就是在请求和响应之间插入一些处理代码,以实现对请求和响应的自定义处理。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值