vue-cli项目中axios的配置文件
./src/api/index.js
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’这个文件中,也可以独立出来。