axios拦截器 vue

页面发送http请求，很多情况我们要对请求和其响应进行特定的处理；如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。

好在强大的axios为开发者提供了这样一个API：拦截器。
拦截器分为 请求（request）拦截器和 响应（response）拦截器

请求拦截器

axios.interceptors.request.use(function (config) {
    // 在发起请求请做一些业务处理
    return config;
  }, function (error) {
    // 对请求失败做处理
    return Promise.reject(error);
  });

响应拦截器

axios.interceptors.response.use(function (response) {
    // 对响应数据做处理
    return response;
  }, function (error) {
    // 对响应错误做处理
    return Promise.reject(error);
  });

vue添加axios拦截器

安装 axios

npm install axios –save-dev

新建文件 axios.js（设置请求超时时间用）
开始统一封装axios， 首先引入axios、qs依赖

import axios from "axios";
import qs from "qs";

然后创建一个axios实例，这个process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面进行配置：

/****** 创建axios实例 ******/
const service = axios.create({
    baseURL: process.env.BASE_URL,  // api的base_url
    timeout: 5000  // 请求超时时间
});

使用request拦截器对axios请求配置做统一处理

service.interceptors.request.use(config => {    
    app.$vux.loading.show({        
        text: '数据加载中……'    
    });     
    config.method === 'post'        
        ? config.data = qs.stringify({...config.data})        
        : config.params = {...config.params};    
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';     
    return config;
    }, error => {  //请求错误处理   
        app.$vux.toast.show({        
            type: 'warn',        
            text: error   
        });    
        Promise.reject(error)
    }
);

对response做统一处理

service.interceptors.response.use(    
    response => {  //成功请求到数据        
        app.$vux.loading.hide();        
        //这里根据后端提供的数据进行对应的处理        
        if (response.data.result === 'TRUE') {            
            return response.data;        
        } else {            
            app.$vux.toast.show({  
                //常规错误处理                
                type: 'warn',                
                text: response.data.data.msg            
            });        
        }    
    },    
    error => {  //响应错误处理console.log('error');        
        console.log(error);        
        console.log(JSON.stringify(error));         
        let text = JSON.parse(JSON.stringify(error)).response.status === 404            
            ? '404'            
            : '网络异常，请重试';        
        app.$vux.toast.show({            
            type: 'warn',            
            text: text        
        });         
        return Promise.reject(error)   
    }
)

demo

// 根据状态码进行判断跳转
// -100跳回登录     -101提示错误信息
axios.interceptors.response.use(function (response) {
  let that = this
  let sid = window.location.href
  if (response.status == -100) {

          router.replace({
              path: '/admin_login',
              query: {backurl: sid}
          })

  } else if (response.status == -101) {
      this.$message.error(response.data.message);
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});