Axios

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

特點

支援瀏覽器和node.js
支援promise
能攔截請求和響應
能轉換請求和響應資料
能取消請求
自動轉換JSON資料
瀏覽器端支援防止CSRF(跨站請求偽造)

安裝

npm安裝

$ npm install axios

bower安裝

$ bower install axios

通過cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 

引入

  import Axios from "axios"
  Vue.prototype.$axios = Axios

使用

執行GET請求

mounted(){
      this.$axios.get("http://www.wwtliu.com/sxtstu/blueberrypai/getChengpinInfo.php")
      .then(res => {
        console.log(res.data);
      })
      .catch(error => {
        console.log(error);
      })
    }
 

上面的請求也可以這樣寫：

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 

執行POST請求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

執行多個併發請求

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) {
    // 兩個請求現在都執行完成
  }));

響應組成

response由以下幾部分資訊組成

{
  // 服務端返回的資料
  data: {},

  // 服務端返回的狀態碼
  status: 200,

  // 服務端返回的狀態資訊
  statusText: 'OK',

  // 響應頭
  // 所有的響應頭名稱都是小寫
  headers: {},

  // axios請求配置
  config: {},

  // 請求
  request: {}
}

請求方法的別名

為方便起見，為所有支援的請求方法提供了別名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

then接收以下響應資訊

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

攔截器

在請求或響應被 then 或 catch 處理前攔截它們。

// 新增請求攔截器
axios.interceptors.request.use(function (config) {
    // 在傳送請求之前做些什麼
    return config;
  }, function (error) {
    // 對請求錯誤做些什麼
    return Promise.reject(error);
  });

// 新增響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應資料做點什麼
    return response;
  }, function (error) {
    // 對響應錯誤做點什麼
    return Promise.reject(error);
  });