vue项目之axios-header、请求拦截和响应拦截

vue项目中axios的统一配置：

项目目录：

api.js：

//设置所有请求的域名前缀
const apiUrl = 'http://xxx.com';
export default{
    apiUrl
}

http.js

/**
 * ajax请求配置
 */
import axios from 'axios'
import apiURL from './api.js'
import Qs from 'qs'
import Vue from 'vue'

import cookie from '../../static/js/cookie.js'

var vue = new Vue;   // 实例化一个新的vue对象，用于绑定toast插件


// axios默认配置
//axios.defaults.timeout = 5000;          // 超时时间
axios.defaults.baseURL = apiURL.apiUrl;  // 默认地址
//**整理数据格式**
axios.defaults.transformRequest = function (data) {
  data = Qs.stringify(data);
  return data;
};

// **路由请求拦截**
// http request 拦截器
axios.interceptors.request.use(
  config => {
    //config.data = JSON.stringify(config.data);  
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    //判断是否存在ticket，即判断用户是否登录，如果存在的话，则每个http header都加上ticket
    if (cookie.get("ticket")) {
        //用户每次操作，都将cookie设置成2小时
        cookie.set("ticket", cookie.get("ticket"),1/12)
        //每个http header都加上ticket
        **config.headers.ticket = cookie.get("ticket");**
        //每个http header都加上personnelid
        if(sessionStorage.loginStaffInfo){
            config.headers.personnelid = sessionStorage.personnelid;            
        }
    }    
    return config;
  },
  error => {
    return Promise.reject(error.response);
  });

// **路由响应拦截**
// http response 拦截器
axios.interceptors.response.use(
  response => {
    if (response.data.resultCode=="404") {
        console.log("response.data.resultCode是404")
        // 返回 错误代码-1 清除ticket信息并跳转到登录页面
//      cookie.del("ticket")
        window.location.href='http://xxx.login.com'
        return
    }else{
        return response;
    }
  },
  error => {
    return Promise.reject(error.response)   // 返回接口返回的错误信息
  });
export default axios;

main.js:

import axios from './httpConfig/http'
Vue.prototype.$http = axios

配置完成之后，就可以在组件中使用axios进行数据请求：
//get请求http://xxx.com/aaa
this.$http.get(“/aaa”,{
params:{

},

}).then((res)=>{

});
//post请求http://xxx.com/bbb
this.$http.post(“/bbb”,{

}).then((res)=>{

});