在 JavaScript 开发中，处理网络请求几乎是每天都要面对的任务。无论是从后端 API 拉取数据，还是向服务器提交表单，一个顺手且可靠的 HTTP 客户端能极大提升工作效率。今天要介绍的 Axios，就是一个在浏览器和 Node.js 环境中均可使用的基于 Promise 的 HTTP 客户端。它 API 简洁、功能扎实，多年来已成为众多开发者的默认首选。

为什么选择 Axios？

Axios 的设计初衷非常明确：让 HTTP 请求变得简单直观。它基于 Promise，因此你可以使用 .then() 和 .catch() 或直接采用 async/await 语法，代码读起来十分清晰。与原生 fetch 相比，Axios 在易用性上明显更胜一筹——自动解析 JSON、内置请求取消、拦截器等功能开箱即用，无需自行实现。

其跨平台能力同样是一大亮点。同一套代码，在浏览器中使用 XMLHttpRequest，在 Node.js 中则调用原生 http 模块，一致性极好，省去了环境适配的麻烦。

快速上手安装

开始使用 Axios 非常简单。根据你的项目环境和包管理工具，选择一种方式安装即可。

使用 npm：

npm install axios

使用 yarn：

yarn add axios

使用 pnpm：

pnpm add axios

如果只想在浏览器中快速体验，也可以直接通过 CDN 引入：

安装完成后，在模块中导入即可使用。在 ES6 模块化项目中，通常这样写：

import axios from 'axios';

CommonJS 环境则使用 require：

const axios = require('axios');

发起你的第一个请求

先从最简单的 GET 请求开始。假设需要从 /user 接口获取 ID 为 12345 的用户信息。

使用 async/await 编写起来非常顺畅：

import axios from 'axios';
try {
  const response = await axios.get('/user?ID=12345');
  console.log(response.data);
} catch (error) {
  console.error('请求失败：', error);
}

Axios 会将响应结果打包成一个结构化的对象。response.data 中包含服务器返回的主体数据。如果请求配置或网络出现问题，错误会被抛出，在 catch 中处理即可。

当然，也可以使用 Promise 链式调用的传统写法：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.error('请求失败：', error);
  });

Axios 为所有常见的 HTTP 方法提供了别名，使代码意图更加清晰：

• axios.get(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.delete(url[, config])
• axios.patch(url[, data[, config]])

深入配置请求

大多数情况下，请求不会这么简单——可能需要设置请求头、传递参数、配超时时间等。Axios 允许通过一个配置对象来精确控制每一次请求。

一个典型的 POST 请求配置大概如下：

await axios.post('/user', {
  firstName: '张',
  lastName: '三'
}, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here'
  },
  timeout: 5000, // 5秒超时
  params: {
    // URL 查询参数
    version: 'v1'
  }
});

Axios 的请求配置非常丰富，从 URL 参数到响应类型都可以管理。下表列出了最常用的配置项：

创建实例与全局配置

当应用需要与多个不同的后端服务通信，或希望对某些请求应用统一配置时，创建 Axios 实例是更优的选择。这样可以避免配置污染，代码也更模块化。

举个例子，可以创建一个专门与用户 API 通信的实例：

const userApi = axios.create({
  baseURL: 'https://api.example.com/v1/user',
  timeout: 10000,
  headers: { 'X-Client-Type': 'web-app' }
});

// 使用这个实例发起请求
const userInfo = await userApi.get('/profile');

通过实例发起的请求都会自动继承这些默认配置。还可以为某个实例单独设置请求和响应拦截器，实现更精细的控制。

有时希望为整个应用的所有 Axios 请求设置一些全局默认值，例如统一认证令牌。这可以通过修改 axios.defaults 实现：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';

需要注意配置的优先级：请求级别的配置会覆盖实例级别的默认配置，实例级别的配置又会覆盖全局默认配置。这种灵活的覆盖机制让你可以在不同层级上管理请求行为。

拦截器：请求与响应的中间站

拦截器是 Axios 中极为强大的功能。它允许你在请求发送到服务器之前，或响应返回到应用代码之前，插入自定义逻辑。这对于统一处理认证、日志、错误格式化等场景来说，是完美的切入点。

一个常见场景是为所有请求自动添加认证令牌：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data;  // 直接返回数据部分，简化后续处理
}, function (error) {
  // 对响应错误做点什么
  if (error.response?.status === 401) {
    // 处理未授权错误，例如跳转到登录页
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

你可以为同一个 Axios 实例添加多个拦截器，它们会按添加的顺序依次执行。请求拦截器按“后进先出”的顺序执行，响应拦截器则按“先进先出”的顺序执行。这种设计让复杂的处理链成为可能。

处理表单与文件上传

在现代 Web 应用中，提交表单数据和上传文件是非常常见的操作。Axios 对此提供了优雅的支持。

对于传统的 application/x-www-form-urlencoded 格式，可以使用 URLSearchParams API：

const params = new URLSearchParams();
params.append('username', 'john_doe');
params.append('email', 'john@example.com');
await axios.post('/login', params);

更棒的是，Axios 能自动进行这种序列化。只需将配置项 headers['Content-Type'] 设置为 application/x-www-form-urlencoded，Axios 就会自动把普通 JavaScript 对象转换成正确格式。

处理 multipart/form-data 格式（常用于文件上传）同样简单，直接使用 FormData 对象：

const formData = new FormData();
formData.append('avatar', fileInput.files[0]);  // 文件
formData.append('username', 'john_doe');        // 普通字段
await axios.post('/upload-avatar', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

Axios 也能自动识别 FormData 实例，并为你设置正确的请求头。这让处理包含混合类型（文本和文件）的表单变得轻而易举。

高级特性：取消请求与错误处理

在单页应用中，经常遇到用户尚未等到请求完成就切换了页面，或者快速触发了多次搜索。此时取消掉仍在进行的旧请求，既能节省带宽，也能避免潜在的状态冲突。

Axios 基于 CancelToken 的旧取消 API 已弃用，现在推荐使用现代的 AbortController：

const controller = new AbortController();

axios.get('/user', {
  signal: controller.signal
}).then(response => {
  console.log(response.data);
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('请求被取消：', thrown.message);
  } else {
    // 处理其他错误
  }
});

// 取消请求
controller.abort('用户取消了操作');

将 AbortController 的 signal 传递给请求配置，随后调用 controller.abort() 即可取消请求。被取消的请求会抛出一个特殊错误，通过 axios.isCancel() 可以识别它。

对于一般错误，Axios 抛出的错误对象包含丰富信息，方便诊断问题：

try {
  await axios.get('/invalid-endpoint');
} catch (error) {
  if (error.response) {
    // 请求已发出，服务器响应了错误状态码（4xx, 5xx）
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // 请求已发出，但没有收到响应
    console.log(error.request);
  } else {
    // 在设置请求时发生了错误
    console.log('Error', error.message);
  }
  console.log(error.config);  // 查看引发错误的请求配置
}

这种结构化的错误信息让你能根据不同类型的错误采取不同处理策略，提升用户体验。

在 TypeScript 中使用

Axios 自带完整的 TypeScript 类型定义，在 TypeScript 项目中使用时，类型提示和编译时检查都能得到充分保障。

导入类型，使请求和响应都具备类型安全：

import axios, { AxiosResponse } from 'axios';

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUser(id: number): Promise {
  const response: AxiosResponse = await axios.get(`/users/${id}`);
  return response.data;  // response.data 的类型被推断为 User
}

还可以为创建的 Axios 实例定义泛型，进一步约束特定 API 返回的数据形状，让整个数据流都处于类型保护之下。

Axios 的生态也在持续进化。它提供了实验性的 Fetch 适配器，允许底层使用原生的 fetch API，同时保留 Axios 的上层体验。对于追求更现代浏览器特性或特定运行时环境（如 Tauri、SvelteKit）的开发者来说，这值得关注。

从简单的数据获取到复杂的企业级应用交互，Axios 凭借一套简洁而强大的 API 覆盖了 HTTP 通信的绝大多数场景。高可配置性、拦截器机制、出色的错误处理——这些特性让它在前端与后端服务的连接中，成为一个既可靠又高效的选择。下次处理网络请求时，不妨试试 Axios，它很可能成为你工具箱中又一个得心应手的工具。