axios是配合vue發(fā)送請(qǐng)求的一個(gè)庫(kù)，區(qū)別于ajax在于ajax的使用大多需要依賴jquery庫(kù)，而axios則是自己封裝了自己的庫(kù)。
1、axios的基本使用：
1、axios({url:"",params:{},method:).then().catch()
2、axios.get({url:'',params}).then().catch()
get傳輸可以直接寫(xiě)在請(qǐng)求頭，以？，& 連接，也可以寫(xiě)在params里，對(duì)象必須在params里寫(xiě)。后臺(tái)獲取直接取得是對(duì)象里的鍵值對(duì)的鍵。
params:{
? ? name:value1,
? ? age:value2
}
3、axios.post({url:"",{name:'zs',age:18}}).then().catch()
表單提交需要添加默認(rèn)的請(qǐng)求頭
4、處理多個(gè)并發(fā)請(qǐng)求
axios.all([axios({url:"",params:{})]).then(
? ? axios.spread((res1,res2)=>{
? ? console.log(res1)
? ? console.log(res2)
})
).catch()
處理多個(gè)并發(fā)請(qǐng)求的意義在于，同時(shí)發(fā)送幾條請(qǐng)求，全部請(qǐng)求帶數(shù)據(jù)統(tǒng)一返回，比如頁(yè)面發(fā)送五條數(shù)據(jù)，要得到更新后的結(jié)果，那么得到的就肯定是最后一條請(qǐng)求執(zhí)行完的結(jié)果。
注意：
發(fā)送請(qǐng)求的參數(shù)會(huì)根據(jù)不同請(qǐng)求而不同。post請(qǐng)求的參數(shù)應(yīng)該用data來(lái)寫(xiě)，而且post提交需要設(shè)置請(qǐng)求頭為application/x-www-form-urlencoded。
而get請(qǐng)求的參數(shù)則是用params來(lái)寫(xiě)，否則會(huì)造成無(wú)法接收。
2、考慮到一個(gè)項(xiàng)目可能會(huì)請(qǐng)求不同服務(wù)器上的數(shù)據(jù)，此時(shí)他的路徑是不同的，這時(shí)候可以創(chuàng)建多個(gè)axios實(shí)例，每個(gè)實(shí)例都有他自己的baseURL，timeout等公有的屬性。
創(chuàng)建axios實(shí)例，首先需要create一個(gè)實(shí)例，然后調(diào)用實(shí)例，如下圖：
3、封裝axios模塊：
為什么要封裝axios模塊？
一個(gè)項(xiàng)目中會(huì)有很多組件需要發(fā)送請(qǐng)求，這時(shí)候每當(dāng)寫(xiě)一個(gè)組件都需要重新引入axios，如果axios這個(gè)庫(kù)不再維護(hù)了，那么很多個(gè)組件都需要修改，這時(shí)候會(huì)造成很大的工作量，不易于后期的維護(hù)。所以要將axios封裝成一個(gè)獨(dú)立的文件，組件發(fā)送請(qǐng)求的時(shí)候只要調(diào)用這個(gè)文件即可，即是需要修改，也只是修改這一個(gè)文件，不需要大面積的去修改其他文件，可維護(hù)性增高。因此封裝獨(dú)立的axios模塊是必要的。
如何封裝axios模塊？
1、首先創(chuàng)建新的文件夾network，文件夾里創(chuàng)建一個(gè)request.js,用來(lái)寫(xiě)具體的封裝的方法
2、引入axios模塊，將request方法導(dǎo)出，方便調(diào)用
3、封裝request方法
3.1、為request傳入三個(gè)參數(shù)，第一個(gè)是請(qǐng)求頭的信息config，第二個(gè)是成功的回調(diào)函數(shù)，第三個(gè)是失敗的回調(diào)函數(shù)。調(diào)用的時(shí)候，傳入相應(yīng)的對(duì)象。
3.2、用promise的方法，使用resolve,reject來(lái)處理成功和失敗的相應(yīng)回調(diào)。使用時(shí)用then,catch來(lái)得到返回的數(shù)據(jù)
3.3、3.2的升級(jí)版，因?yàn)樵赼xios內(nèi)部就是promise封裝的，所以在用promise的時(shí)候可以省去promise的創(chuàng)建，可以直接將實(shí)例化對(duì)象返回
下面分別對(duì)應(yīng)方法1,2,3
4、攔截器的使用
分為四個(gè)，請(qǐng)求成功，請(qǐng)求失敗，響應(yīng)成功，響應(yīng)失敗
instance1.interceptors.request.use().then().catch()
instance1.interceptors.response.use().then().catch()
具體見(jiàn)下圖
