1. 程式人生 > >axios 正確打開方式

axios 正確打開方式

one 訪問 bow 不改變 type mis ram 原型鏈 .proto

一、安裝
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 正確打開方式