1. 程式人生 > >axios傳送get post請求問題 與 axios攔截器的使用

axios傳送get post請求問題 與 axios攔截器的使用

1、axios傳送get post請求問題 
      傳送post請求時一般都要設定Content-Type,傳送內容的型別,        
     application/json指傳送json物件但是要提前stringify一下。application/xxxx-form指傳送?a=b&c=d格式,可以用qs的方法格式化一下,qs在安裝axios後會自動安裝,只需要元件裡import一下即可。

const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}

const postData=Qs.stringify(this
.formCustomer);//過濾成?&=格式 'Content-Type':'application/xxxx-form'}

2.axios攔截器的使用 

當我們訪問某個地址頁面時,有時會要求我們重新登入後再訪問該頁面,也就是身份認證失效了,如token丟失了,或者是token依然存在本地,但是卻失效了,所以單單判斷本地有沒有token值不能解決問題。此時請求時伺服器返回的是401錯誤,授權出錯,也就是沒有權利訪問該頁面。 
我們可以在傳送所有請求之前和操作伺服器響應資料之前對這種情況過濾。
// http request 請求攔截器,有token值則配置上token值
axios.interceptors.request.use
( config => { if (token) { // 每次傳送請求之前判斷是否存在token,如果存在,則統一在http請求的header都加上token,不用每次請求都手動添加了 config.headers.Authorization = token; } return config; }, err => { return Promise.reject(err); }); // http response 伺服器響應攔截器,這裡攔截401錯誤,並重新跳入登頁重新獲取token
axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 這裡寫清除token的程式碼 router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath}//登入成功後跳入瀏覽的當前頁面 }) } } return Promise.reject(error.response.data) });