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)=>{

});