什么是 axios？
Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中，
準備作業
安裝axios
npm install axios
參考
ES6 import參考
因為axios不是vue的插件，所以不能直接用use方法，需要將其加載到原型上，
import axios from 'axios'
如果要全域使用axios就需要在main.js中設定成全域的，然后再組件中通過this呼叫
Vue.prototype.$axios=axios;
使用
發送一個最簡單的請求
這里我們發送一個帶引數的get請求，params引數放在get方法的第二個引數中，如果沒有引數get方法里可以只寫路徑，如果請求失敗捕獲一下例外，
axios
.get('http://rap2api.taobao.org/app/mock/23080/resources/search',{
params: {
id: 5
}
})
.then(res => {
console.log('資料是:', res);
})
.catch((e) => {
console.log('獲取資料失敗');
});
當然，我們也可以發送一個POST請求，post方法的第二個引數為請求引數物件，
this.$axios.post('http://rap2api.taobao.org/app/mock/121145/post',{
name: '小明'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});
一次合并發送多個請求
分別寫兩個請求函式，利用axios的all方法接收一個由每個請求函陣列成的陣列，可以一次性發送多個請求，如果全部請求成功，在axios.spread方法接收一個回呼函式，該函式的引數就是每個請求回傳的結果，
function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions(){
return axios.get('/user/12345/permissions');
}
this.$axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(res1,res2){
//當這兩個請求都完成的時候會觸發這個函式，兩個引數分別代表回傳的結果
}))
axios的API
以上通過axios直接呼叫發放來發起對應的請求其實是axios為了方便起見給不同的請求提供的別名方法，我們完全可以通過呼叫axios的API，傳遞一個配置物件來發起請求，
發送post請求，引數寫在data屬性中
axios({
url: 'http://rap2api.taobao.org/app/mock/121145',
method: 'post',
data: {
name: '小月'
}
}).then(res => {
console.log('請求結果：', res);
});
發送get請求，默認就是get請求，直接第一個引數寫路徑，第二個引數寫配置物件，引數通過params屬性設定，
axios('http://rap2api.taobao.org/app/mock/121145', {
params: {
name: '小月'
}
}).then(res => {
console.log('請求結果：', res);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/4842.html
標籤：其他
上一篇：CSS基礎知識第二篇