什麼是 axios？

Axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。javascript

準備工做

安裝axios

npm install axios

引用

ES6 import引用

由於axios不是vue的插件，因此不能直接用use方法，須要將其加載到原型上。vue

import axios from 'axios'

若是要全局使用axios就須要在main.js中設置成全局的，而後再組件中經過this調用java

Vue.prototype.$axios=axios;

使用

發送一個最簡單的請求

這裏咱們發送一個帶參數的get請求，params參數放在get方法的第二個參數中，若是沒有參數get方法裏能夠只寫路徑。若是請求失敗捕獲一下異常。node

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方法的第二個參數爲請求參數對象。ios

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方法接收一個回調函數，該函數的參數就是每一個請求返回的結果。npm

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，傳遞一個配置對象來發起請求。axios

發送post請求，參數寫在data屬性中api

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);
});

axios的使用