vue axios请求拦截器，判断是否登录超时，或对请求结果做一个统一处理

当我们在做接口请求时，比如判断登录超时时候，通常是接口返回一个特定的错误码，那如果我们每个接口都去判断一个耗时耗力，这个时候我们可以用拦截器去进行统一的http请求拦截。1.安装配置axios[plain] view plain copycnpm install --save axios 我们可以建一个js文件来做这个统一的处理，新建一个axios.js，如下[javascript] view

xinzi11243094

2907人浏览 · 2018-06-01 17:57:44

xinzi11243094 · 2018-06-01 17:57:44 发布

当我们在做接口请求时，比如判断登录超时时候，通常是接口返回一个特定的错误码，那如果我们每个接口都去判断一个耗时耗力，这个时候我们可以用拦截器去进行统一的http请求拦截。

1.安装配置axios

 
   [plain]  
   view plaincopy
cnpm install --save axios  

我们可以建一个js文件来做这个统一的处理，新建一个axios.js，如下

 
   [javascript]  
   view plaincopy
import axios from 'axios'  
import { Indicator } from 'mint-ui';  
import { Toast } from 'mint-ui';  
  
// http request 拦截器  
axios.interceptors.request.use(  
    config => {  
        Indicator.open()  
        return config;  
    },  
    err => {  
        Indicator.close()  
        return Promise.reject(err);  
    });  
   
// http response 拦截器  
axios.interceptors.response.use(  
    response => {  
        Indicator.close()  
        return response;  
    },  
    error => {  
        Indicator.close()  
    });  
export default axios  

然后在main.js中引入这个js文件

 
   [javascript]  
   view plaincopy
import axios from './axio';  
Vue.prototype.$axios = axios;  

这样就可以使用axios去请求了，在组件中可以用this.axios去调用

 
   [javascript]  
   view plaincopy
this.$axios({  
        url:requestUrl+'homePage/v1/indexNewPropertiesResult',  
        method:'POST',  
      }).then(function(response){  //接口返回数据  
        console.log(response)  
        that.modulesArr=response.data.data.modules;  
//      that.getRecommendGoods(0);  
      });  

只有用axios请求接口，才能去拦截，现在已经能在axios.js中拦截到了，可以在两个状态中做你需要的操作

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^