axios 使用實例

axios在vue項目中使用

axios基本的使用，就能夠直接跳過了，能夠參考一下官網,在本身vue spa 項目中用到了axios,所以記錄一下。

Creating an instance

在項目中個人用法是建立一個實例

// Init Axios
Vue.prototype.$http = axios.create({
    baseURL: process.env.API_URL
});

這個好處是我能夠定製本身的公共配置項，官網也說明，only the url is required,之後全部的請求均可以基於這個配置項

Config order of precedence

這裏還能夠有配置優先

Vue.prototype.$http.defaults.timeout=2500;

 Vue.prototype.$http.get('/request',{
  timeout:5000
})

interceptors

這個功能是我最喜歡的一個功能，對我而言，後端藉口也是本身寫的，那麼來講，本身定義json 格式狀態碼都是有規定，那麼在項目中，在請求和相應的時候，能夠事先攔截作處理，直接上代碼：

• 請求攔截：

//config 就是defaults.js裏面全部的配置
Vue.protype.$http.interceptors.request.use(config=>{
 //配合jwt 
 var token=window.localStorage.getItem('jwtToken');

  if(token){
       config.headers.Authorization=`Bearer ${token}`;
  }
  return config;

},error=>{
  return Promise.reject(error);
})

• 響應攔截：

axios.interceptors.response.user(res=>{

//相關處理
return res.data;

},error=>{

   return Promise.reject(error);
})

實質上這些處理已經夠用了，若是沒有你想要的，好比定製更多的配置項，這些均可以上官網上找到

good luck