Axios - 技术栈

Axios 核心功能与用途

Axios 是一个基于 Promise 的HTTP 客户端，主要用于浏览器和 Node.js 环境中发送 HTTP 请求。它是前端开发中处理网络请求的主流工具，核心价值在于简化 HTTP 通信流程，并提供丰富的功能来应对各种网络场景。

一、核心功能

1. 发送各种类型的 HTTP 请求

支持 HTTP 所有常用方法，满足不同业务需求：

GET：获取数据（如列表查询、详情获取）
POST：提交数据（如表单提交、创建资源）
PUT/PATCH：更新数据（全量更新/部分更新）
DELETE：删除资源
其他：HEAD（获取响应头）、OPTIONS（跨域预检）等

示例：

javascript 复制代码

// GET 请求
axios.get('/api/users', { params: { page: 1 } })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// POST 请求
axios.post('/api/users', { name: 'Alice', age: 20 })
  .then(response => console.log('创建成功'));

2. 拦截请求与响应（Interceptor）

允许在请求发送前或响应返回后拦截处理，实现通用逻辑：

请求拦截：统一添加请求头（如 Token）、参数序列化、加载状态显示等。
响应拦截：统一处理错误（如 401 权限失效跳转登录）、剥离响应数据外层结构等。

示例：

javascript 复制代码

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 添加 Token 到请求头
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  error => Promise.reject(error)
);

// 响应拦截器
axios.interceptors.response.use(
  response => response.data, // 直接返回数据部分
  error => {
    if (error.response?.status === 401) {
      // 权限失效，跳转登录页
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

3. 处理请求参数与响应数据

参数自动序列化 ：GET 请求的 params 会自动转换为 URL query 字符串（如 { page: 1 } → ?page=1）。
请求体自动转换 ：POST/PUT 等请求的 data 会自动转换为 JSON 字符串（默认），或根据 Content-Type 处理（如 application/x-www-form-urlencoded）。
响应数据解析：自动解析 JSON 格式的响应体，直接返回 JavaScript 对象。

4. 支持取消请求

可通过 CancelToken 或 AbortController 取消尚未完成的请求，避免无效请求浪费资源（如用户快速切换标签页时）。

示例：

javascript 复制代码

// 创建取消令牌
const controller = new AbortController();

// 发送请求时关联令牌
axios.get('/api/data', { signal: controller.signal })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('请求已取消', error.message);
    }
  });

// 取消请求（如组件卸载时）
controller.abort('用户主动取消');

5. 处理跨域请求

浏览器环境中自动支持跨域资源共享（CORS），配合后端配置可轻松处理跨域请求。无需手动设置 XMLHttpRequest 的跨域属性，Axios 内部已封装兼容逻辑。

6. 批量请求与并发控制

通过 axios.all 和 axios.spread 处理并发请求，适合需要同时获取多个接口数据的场景。

示例：

javascript 复制代码

// 同时请求两个接口
axios.all([
  axios.get('/api/users'),
  axios.get('/api/posts')
])
.then(axios.spread((usersRes, postsRes) => {
  console.log('用户列表：', usersRes.data);
  console.log('文章列表：', postsRes.data);
}));

7. 配置默认值

可全局或局部设置请求配置（如基础 URL、超时时间），减少重复代码。

示例：

javascript 复制代码

// 全局默认配置
axios.defaults.baseURL = 'https://api.example.com'; // 基础 URL
axios.defaults.timeout = 5000; // 超时时间（毫秒）
axios.defaults.headers.common['Content-Type'] = 'application/json';

二、适用场景

前端与后端通信 ：替代原生 XMLHttpRequest 或 fetch，简化 API 调用逻辑。
单页应用（SPA）数据交互：如 Vue/React/Angular 项目中获取后端数据、提交表单等。
Node.js 服务端请求：在 Node.js 中作为 HTTP 客户端调用第三方 API（如支付接口、地图接口）。
统一请求管理：通过拦截器、默认配置实现项目级别的请求规范（如身份验证、错误处理）。
复杂网络场景处理：如取消请求、超时重试、并发控制等。

三、为什么选择 Axios？

兼容性好 ：支持浏览器（IE 11+）和 Node.js 环境，弥补 fetch 在旧浏览器中的兼容性问题。
API 简洁：基于 Promise 设计，支持 async/await 语法，代码更易读。
功能全面：拦截器、取消请求、批量请求等功能开箱即用，无需重复开发。
社区活跃：作为主流 HTTP 客户端，文档丰富，问题解决方案易查找。

总结

Axios 是处理 HTTP 请求的"瑞士军刀"，它封装了底层通信细节，提供了一套简洁、强大的 API，让开发者能更专注于业务逻辑而非网络请求本身。无论是前端与后端的数据交互，还是服务端调用第三方接口，Axios 都是高效、可靠的选择。