vue項目對axios的全域配置

標籤：自己   tick   header   配置   json   image   .com   cat   use   

標準的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("請求失敗")
})

 

vue項目對axios的全域配置