vue项目对axios的全局配置http ; 全局或者单个 请求添加header
标准的vue-cli项目结构(httpConfig文件夹自己建的):api.js://const apiUrl = 'http://test';//测试域名,自己改成自己的const apiUrl = 'http://xxoo';//线上域名,自己改成自己的export default apiUrlhttp.js:/*** ajax请求配置*/import axios from 'axios'im
·
标准的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("请求失败")
})
// 或者这种格式, 根据后台接口要求修改
this.$http.get("/miniapp/monitorpoint/alarmlist/" + this.id, {
// params: { id: 29 } // 这里的参数, 拼接在url 后面
}).then((res) => {
console.log('alarmlist-200', res.data.object)
this.alarmList = res.data.object;
}).catch((err) => {
alert("请求失败")
})
```
单个请求添加header
this.$http
.post(netUrl, change, {
headers: {
Authorization: "Bearer " + this.$cookies.get("token")
}
})
.then(
response => {
console.log(response.data);
if (response.data != null) {
}
},
response => {
console.log("error");
}
);
// 附上原帖地址
https://www.cnblogs.com/djjlovedjj/p/9050841.html
更多推荐
已为社区贡献3条内容
所有评论(0)