怎样使用 axios 库处理 http 请求

Lasted 2020-02-18 19:16:52

Axios 是一个基于 Promise 的 HTTP 库,可以在浏览器和 node.js 中使用。

特性

  • 在浏览器中创建 XMLHttpRequests 请求。
  • 在 node.js 中创建 http 请求。
  • 支持 Promise API。
  • 支持注入请求和响应。
  • 处理请求和响应数据。
  • 取消请求。
  • 自动处理 JSON 格式数据。
  • 防止 XSRF 攻击。

安装

使用 npm 安装:

npm install axios

使用 bower 安装:

bower install axios

使用 yarn 安装:

yarn add axios

直接使用 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);
  }
}
注意:async/await 关键字在 ECMAScript 2017 后才支持,一些 IE 浏览器并不支持,使用是要注意。

执行 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) {
    // 两个请求现在都执行完成
  }));