Axios 是什么?

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

特性

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 超时处理
• 查询参数序列化支持嵌套项处理
• 自动将请求体序列化为：
  • JSON (application/json)
  • Multipart / FormData (multipart/form-data)
  • URL encoded form (application/x-www-form-urlencoded)
• 将 HTML Form 转换成 JSON 进行请求
• 自动转换JSON数据
• 获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
• 为 node.js 设置带宽限制
• 兼容符合规范的 FormData 和 Blob（包括 node.js）
• 客户端支持防御XSRF

安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 yarn:

$ yarn add axios

使用 jsDelivr CDN:

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

使用 unpkg CDN:

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

为了直接使用 require 导入预构建的 CommonJS 模块（如果您的模块打包器无法自动解析它们），我们提供了以下预构建模块：

const axios = require('axios/dist/browser/axios.cjs'); // browser
const axios = require('axios/dist/node/axios.cjs'); // node

例子

发起 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });


// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });


// 支持async/await用法
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');
}

const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);

// OR

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function ([acct, perm]) {
    // ...
  });

将 HTML Form 转换成 JSON 进行请求

const {data} = await axios.post('/user', document.querySelector('#my-form'), {
  headers: {
    'Content-Type': 'application/json'
  }
})

Forms

• Multipart (multipart/form-data)

  const {data} = await axios.post('https://httpbin.org/post', {
      firstName: 'Fred',
      lastName: 'Flintstone',
      orders: [1, 2, 3],
      photo: document.querySelector('#fileInput').files
    }, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  )
  

• URL encoded form (application/x-www-form-urlencoded)

  const {data} = await axios.post('https://httpbin.org/post', {
      firstName: 'Fred',
      lastName: 'Flintstone',
      orders: [1, 2, 3]
    }, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
  })