起步

基于 promise 可以用于浏览器和 node.js 的网络请求库

介绍

Axios 是什么?

Axios 是一个基于 promiseopen in new window 网络请求库,作用于 node.jsopen in new window 和浏览器中。 它是 isomorphicopen in new window 的 (即同一套代码可以运行在浏览器和 node.js 中) 。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

安装

使用 npm:

npm install axios
1

使用 bower:

bower install axios
1

使用 yarn:

yarn add axios
1

使用 jsDelivr CDN:

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

使用 unpkg CDN:

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

用例

注意: CommonJS 用法

为了在 CommonJS 中使用 require() 导入时获得 TypeScript 类型推断(智能感知/自动完成),请使用以下方法:

const axios = require('axios').default;
// axios.<method> 能够提供自动完成和参数类型推断功能
1
2

GET 请求

发起一个 GET 请求

const axios = require('axios');

// 向给定ID的用户发起请求
axios
  .get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上述请求也可以按以下方式完成(可选)

axios
  .get('/user', {
    params: {
      ID: 12345,
    },
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

支持 async/await 用法

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}
1
2
3
4
5
6
7
8

注意: 由于 async/await 是 ECMAScript 2017 中的一部分,而且在 IE 和一些旧的浏览器中不支持,所以使用时务必要小心。

POST 请求

发起一个 POST 请求

axios
  .post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone',
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
1
2
3
4
5
6
7
8
9
10
11

发起多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()]).then(function (results) {
  const acct = results[0];
  const perm = results[1];
});
1
2
3
4
5
6
7
8
9
10
11
12
Last Updated: 11/18/2021, 5:55:33 PM