./src/api/index.js
首先引入axios,引入配置好的路由,并配置响应拦截器
import axios from "axios";
import router from "../router";
// http 响应拦截器
axios.interceptors.response.use(
response => {
// 对响应数据做处理
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
router.push({
path:'./login'
})
}
}
return Promise.reject(error);
}
)
状态码401是对身份的验证,如果验证失败,需要跳转到登陆页面。
axios.interceptors.request.use(
config => {
if( localStorage.getItem('token') ){
config.headers.Authorization = localStorage.getItem('token')
}
return config;
},
error => {
return Promise.reject(error);
}
)
如果本地存储存在token(如果token存入了vuex的store就从store取),每请求前在参数的headers.Authorization中存入token。
let qs from 'qs';
let config = {
baseURL: process.env.VUE_APP_BASEURL,
method: "get",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
transformRequest: [
function(data) {
// 由于使用的form-data传数据所以要格式化
data = qs.stringify(data);
return data;
}
]
};
- process.env.VUE_APP_BASEURL是vue-cli自己手动配置的值。
- transformRequest允许在向服务器发送前,修改请求数据,只能用在 ‘PUT‘, ‘POST‘ 和 ‘PATCH‘ 这几个请求方法,后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream。
- qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。
//测试接口调用
export const getTestData = params => {
return axios.post("getTestData", params, config).then(res => res.data);
};
接口调用可以全写在‘./src/api/index.js‘这个文件中,也可以独立出来。