Vue全局拦截

个人开发项目遇到了需要做全局状态拦截,分享一下解决方案

拦截器

    首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多

vue2.0之后,就不再对vue-resource更新,而是推荐使用axios。

本人使用的是vue-resource 调用的接口

拦截代码:(使用时可打断点调试)

Vue.http.interceptors.push((request, next) => {
  next((response) => {
    if (response.body.status === 403) {
     alert(response.body.msg)
      console.log(response.body.msg)
    }
    return response;
  });
});

使用axios掉用接口的拦截代码如下:

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    console.log(error)
    if (error.response) {
      console.log(error.response.status);
      switch (error.response.status) {
        case 403:
          alert(111)
      }
    }
    return Promise.reject(error.response.data)   // 返回接口返回的错误信息
  });

本文为博主原创,未经允许禁止转载,转载请注明出处,原文链接https://mp.csdn.net/postedit/84136465

你可能感兴趣的:(vue.js)