Vue開發問題（axios封裝）

首先放出引用的源**

引用**於 vue axios 封裝全域性呼叫axios

感謝愛吃排骨給予的幫助

return promise.reject(error);

});

//返回狀態判斷(新增響應***)

axios.interceptors.response.use((res) =>

return res;

}, (error) =>

return promise.reject(error);

});//返回乙個promise(傳送post請求)

function post(url, params) , err => )

.catch((error) => )})}

//返回乙個promise(傳送get請求)

function get(url, param) )

.then(response => , err => )

.catch((error) => )})}

export default

所以…為了能正常使用我又create另外乙個axios2

問題來了，萬一get方式的請求頭也是這，咋辦，所以乾脆寫在請求***裡

對！只有axios、axios2，以及 'content-type』發生變化，是不是感覺繁瑣了很多，沒錯！但是勝在能用麼，如果這個地方寫不對，請求會報400，引數錯誤。稍後我會放出完整版的，需要的直接拉到最下面吧

那麼在下面封裝get，或者post 的時候，只需要使用兩個不同的axios就行。舉例：

//返回乙個promise(傳送post請求：'content-type』為form方式)

function post(url, params) , err => )

.catch((error) => )

})//返回乙個promise(傳送post請求：'content-type』為json方式)

function jsonpost(url, params) , err => )

.catch((error) => )})}

有點流水賬的意思，還是那句話。。。。。當時能用就行

2、第5行env檔案未說明如何應用

這個請參考我的其他部落格《vue開發問題——打包後首頁白屏》

3、第14行，token 名稱的問題

排骨老哥不地道（可能是我實在太菜），token名稱是後端定的，得隨時改，所以下面這個地方：『access-token』，得換成自己後端的token名稱，在1問題中，我封裝的***，我的專案裡名稱是叫 authorization』

4、第18行，當隨意使用qs進行轉序列化post引數，引數有時候想在body又有時候想在url的問題

細心的小夥伴可能發現了，我在封裝兩種請求***的時候axios，比axios2多了億點點內容

if (config.method === 『post』)

function deletefn(url, params) ,err => )

.catch(err => )

});}

function download(url, params) )

.then(response => , err => )

.catch((error) => )})}

6、響應***的修改

axios.interceptors.response.use((res) =>

return res;

});作用是如果返回碼401（無許可權，或session過期）我就利用router去跳轉到登入頁

原博主設定的是如果登入的成功，就更新token，我這專案不需要，所以就偷個懶，有需要的可以自己試一試

這裡有個小插曲，再這裡引用router 必須是 …/ 比如：

import router from 「…/router」

最後記得自己封裝的方法要 export 匯出哦~

下面是我完整的**，另外，還會附上axios封裝簡化版解決上述的』content-type』問題

import axios from 「axios」

import qs from 「qs」

import router from 「…/router」

function jsonget(url, params) , err => )

.catch((error) => )})}

function jsondelete(url, params) )

.then(response => , err => )

.catch((error) => )})}

//返回乙個promise(傳送post請求)

function post(url, params) , err => )

.catch((error) => )})}

返回乙個promise(傳送get請求)

function get(url, param) )

.then(response => , err => )

.catch((error) => )})}

function deletefn(url, params) ,err => )

.catch(err => )

});}

function download(url, params) )

.then(response => , err => )

.catch((error) => )})}

export default

簡化版其他地方呼叫

Vue開發問題（axios封裝）

vue專案封裝axios

vue簡單封裝axios

vue 封裝axios請求

Vue開發問題（axios封裝）

vue專案封裝axios

vue簡單封裝axios

vue 封裝axios請求

相關推薦