标准的vue-cli项目结构(httpConfig文件夹自己建的):
api.js:
//const apiUrl = 'http://test';//测试域名,自己改成自己的
const apiUrl = 'http://xxoo';//线上域名,自己改成自己的
export default apiUrl
http.js:
/** * ajax请求配置 */ import axios from 'axios' import apiURL from './api.js' //import Qs from 'qs' import cookie from '../../static/js/cookie.js' // axios默认配置 axios.defaults.timeout = 10000; // 超时时间 axios.defaults.baseURL = apiURL; // 默认地址 //整理数据 axios.defaults.transformRequest = function (data) { //data = Qs.stringify(data); data = JSON.stringify(data); return data; }; // 路由请求拦截 // http request 拦截器 axios.interceptors.request.use( config => { //config.data = JSON.stringify(config.data); config.headers['Content-Type'] = 'application/json;charset=UTF-8'; //判断是否存在ticket,如果存在的话,则每个http header都加上ticket if (cookie.get("token")) { //用户每次操作,都将cookie设置成2小时 cookie.set("token",cookie.get("token") ,1/12) cookie.set("name",cookie.get("name") ,1/12)
config.headers.token = cookie.get("token");
config.headers.name= cookie.get("name");
} 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://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
请求示例:
//post
this.$http.post('/itemProps/addItemProps',{ name: this.name, parentId:this.parentId, sortOrder:0 }).then((res)=>{
console.log(res) }).catch((err)=>{ alert("请求失败") })
//get
this.$http.get("/roles/getPersonnelInfoRoles",{
params:{
key:"value"
}
}).then((res) => {
console.log(res)
}).catch((err)=>{
alert("请求失败")
})