Vue推薦使用axios 發送網絡請求:最近重新開始做Vue項目,重新回歸一下。從axios的幾個方法開始吧。
1. 安裝: 既然是Vue項目,我還是選擇常用的npm的方式
$ npm install axios (-d)
2. 引入: const axios = require('axios') 或者babel轉化用ESmodule的方式 const axios = import('axios')
3.請求: GET 請求,請求方式都非常靈活:
axios.get('/user?ID=12345') ---------------------- URL攜帶參數的方式
axios.get('/user',{ params:{ ID:12345 } }) ------- 參數對象的方式
注意:返回的都是promise ------ 下面是兩個處理返回的方式
a. Promise.then().catch的形式 :
axios.get('/user',{param:{ID:12345}}).then(response => {console.log(response)})
b. async function getUser() {
try {
const response = await axios.get('/user',{ param:{ ID:12345} })
} catch (e) {
console.log(e)
}
}
Post請求:按照參數對象方式傳遞即可
axios.post('/user',{ name:"張三",age:"18" }) 注意: 這里是沒有param 的,直接對象方式傳遞就可以了。
4. 並發 請求
fucntion getUser(){
axios.get('/user/1234')
}
fucntion getPermission (){
axios.get('/user/1234/permissions')
}
axios.all([getUser,getPermission ]).then(axios.spread(function(acct,perms) { ----.then方法中,調用axios.spread方法,參數為函數,該函數接受兩個參數acct pe
// 這兩個參數,分別表示兩個請求的返回。
})) ------- 即Promise數組形式 catch函數捕獲錯誤來源,待研究 ---
5. 設置基本配置 包括baseUrl 和頭部等 常用baseUrl axios.creat( {config對象} )
axios.creat({
baseURL:'http://some-domain.com/api/', // 基礎url 通過webpack配置運行環境的判斷,可以更改線上地址,開發地址前綴
timeout:1000, // 響應超時時間
headers:{Content-Type:application/x-www-form-urlencoded } // 請求頭
})