axios 正確打開方式
一、安裝
1、 利用npm安裝npm install axios --save
2、 利用bower安裝bower install axios --save
3、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>(vue框架的直接忽略)
bind(this)很多人喜歡在外面定義一個that,裏面用that來指向外部的this是一個道理。為了解決無法訪問到 Vue 實例
.Catch錯誤處理
axios 並不能 use,只能每個需要發送請求的組件中即時引入
為了解決這個問題,有兩種開發思路,一是在引入 axios 之後,修改原型鏈,二是結合 Vuex,封裝一個 aciton。
import axios from ‘axios‘
這時候如果在其它的組件中,是無法使用 axios 命令的。但如果將 axios 改寫為 Vue 的原型屬性,就能解決這個問題
Vue.prototype.$ajax = axios
vue-resource不改變this指向;axios會改變 存下 var _this=this;/var that = this;
發送一個GET請求
//通過給定的ID來發送請求
axios.get(‘/user?ID=12345‘)
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
//以上請求也可以通過這種方式來發送
axios.get(‘/user‘,{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
發送一個POST請求
axios.post(‘/user‘,{
firstName:‘Fred‘,
lastName:‘Flintstone‘
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});
3、一次性並發多個請求
function getUserAccount(){
return axios.get(‘/user/12345‘);
}
function getUserPermissions(){
return axios.get(‘/user/12345/permissions‘);
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//當這兩個請求都完成的時候會觸發這個函數,兩個參數分別代表返回的結果
}))
axios 正確打開方式