引言

Axios 是一个基于 Promise 的 HTTP 客户端，可同时运行在浏览器和 Node.js 环境中。它提供了简洁易用的网络请求 API，支持多种主流包管理器安装，你可以根据项目的依赖管理方案，选择合适的安装方法。

安装方式

npm

npm 是 Node.js 默认的包管理工具，适用于绝大多数前端 /Node.js 项目：

npm install axios

yarn

yarn 是 Facebook 推出的包管理器，安装速度和依赖稳定性更优：

yarn add axios

pnpm

pnpm 是高性能、节省磁盘空间的新一代包管理器，是现代项目的主流选择：

pnpm install axios

AJAX 基础

AJAX（Asynchronous JavaScript and XML）是前端 Web 开发的核心技术，用于通过异步方式与服务器进行数据通信，最终实现页面的动态更新。 该技术彻底改变了传统 Web 应用整页刷新的交互模式，是现代前端开发的基础。

核心特点

• 异步通信：AJAX 采用异步请求机制，发送请求后不会阻塞页面渲染，用户可以正常操作界面，无需等待服务器响应

• 局部刷新：仅更新页面需要修改的局部区域，无需重新加载整个页面，大幅提升用户体验

• 无需页面刷新：后台静默完成请求与响应，让页面交互更流畅、响应更迅速

• 灵活的数据格式：支持 JSON、HTML、XML、纯文本等多种数据格式，目前主流使用轻量的 JSON 格式

• 核心依赖：浏览器环境中，AJAX 底层依赖 XMLHttpRequest 对象实现网络请求

原生 AJAX 应用

原生 AJAX 基于 XMLHttpRequest 编写，是理解网络请求原理的基础，以下是最常用的 GET 和 POST 请求示例：

GET 请求

用于向服务器获取数据，参数拼接在 URL 中：

// 1. 创建 XHR 实例
const xhr = new XMLHttpRequest();
// 2. 初始化请求：请求方式、请求地址、异步标识（true 表示异步）
xhr.open('GET', 'https://api.example.com/data', true);
// 3. 监听请求完成事件
xhr.onload = function () {
    // 状态码 200 表示请求成功
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error('请求失败');
    }
};
// 4. 发送请求
xhr.send();

POST 请求

用于向服务器提交数据，参数放在请求体中：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
// 设置请求头，告知服务器发送的是 JSON 格式数据
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error('请求失败');
    }
};
// 发送请求，将 JS 对象转为 JSON 字符串
xhr.send(JSON.stringify({ name: 'John Doe', age: 30 }));

补充说明

原生 AJAX 存在回调嵌套复杂、API 繁琐、错误处理不友好等问题，这也是 Axios 被广泛使用的原因——Axios 对原生 XHR 进行了 Promise 封装，简化了 API 并统一了错误处理。