怎樣使用 axios 庫處理 http 請求

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

特性

• 在瀏覽器中創建 XMLHttpRequests 請求。
• 在 node.js 中創建 http 請求。
• 支持 Promise API。
• 支持注入請求和響應。
• 處理請求和響應數據。
• 取消請求。
• 自動處理 JSON 格式數據。
• 防止 XSRF 攻擊。

安裝

使用 npm 安裝：

使用 bower 安裝：

使用 yarn 安裝：

直接使用 CDN：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

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

案例

執行 GET 請求：

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(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) {
    // 兩個請求現在都執行完成
  }));