什么是 Axios？

什么是 Axios？

Axios 是一个基于 Promise 的轻量级 HTTP 客户端库，适用于 浏览器（Browser）‍ 和 Node.js 环境。它的主要作用是简化 HTTP 请求（如 GET、POST 等）的发送和响应处理，使得前后端代码更加简洁、易读。

Axios 底层封装了浏览器中的 XMLHttpRequest 对象和 Node.js 中的 http 模块，并提供了一套统一的 API 接口，让开发者不需要关心底层细节即可轻松进行网络通信。

核心特性

Axios 之所以成为前端开发的首选库，主要得益于以下几个强大的特性：

1. 基于 Promise：原生支持 Promise API（如 then/catch），可以配合 async/await 使用，代码结构清晰，错误处理简便。
2. 自动转换 JSON：默认情况下，Axios 会自动将响应数据解析为 JavaScript 对象，无需手动调用 JSON.parse。
3. 请求与响应拦截器：支持在请求发送前（如统一添加 token）和响应返回后（如统一处理错误）进行拦截处理，这是 Axios 最受欢迎的功能之一。
4. 请求取消：提供了取消请求的功能（Cancel Token），适用于需要取消长轮询或防抖的场景。
5. 错误处理：不仅区分网络错误，还能根据 HTTP 状态码（如 404、500）抛出错误。
6. 客户端防御 XSRF：内置了 XSRF 防御机制，自动处理相关 cookie 和 header。

基础使用方法

以下是一个简单的 Axios GET 请求示例，演示了如何使用 Promise 或 async/await 进行请求：

// 方法一：Promise 方式
axios.get('https://api.example.com/users')
  .then(response => {
    console.log('获取成功:', response.data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

// 方法二：async/await 方式
async function fetchUsers() {
  try {
    const response = await axios.get('https://api.example.com/users');
    console.log('获取成功:', response.data);
  } catch (error) {
    console.error('请求出错:', error);
  }
}

官方文档与资源

了解 Axios 最权威的方式是直接查阅其官方文档和源码仓库：

• 官方文档：详细介绍了 API 说明、配置选项、错误处理、拦截器等。
  • 中文文档地址（可能已迁移或失效）：http://www .axios-js.com/zh-cn/docs/
  • 参考地址：https://axios-http.com/ （通常会自动重定向至最新版本）
• GitHub 仓库：可以在这里获取最新的源码、版本更新日志以及社区讨论。
  • https://github.com/axios/axios

如果你在项目中使用 Vue.js，Axios 甚至已经被集成在了官方脚手架工具 @vue/cli 的默认模板中