Axios 使用教程完全指南，让你的网络请求变得简单

在 JavaScript 开发中，处理网络请求是家常便饭。无论是从后端 API 获取数据，还是向服务器提交表单，一个可靠、易用的 HTTP 客户端能极大提升开发效率。今天要聊的 Axios，正是这样一个在浏览器和 Node.js 中都能大显身手的 Promise-based HTTP 客户端。它凭借简洁的 API 和强大的功能，成为了无数开发者的首选。

为什么选择 Axios？

Axios 的设计理念是让 HTTP 请求变得简单直观。它基于 Promise，这意味着你可以用 .then() 和 .catch()，或者更现代的 async/await 语法来处理异步操作，代码逻辑清晰易读。与原生 fetch API 相比，Axios 在易用性上更胜一筹，例如自动转换 JSON 数据、内置请求取消、拦截器等特性，都是开箱即用的。

它的跨平台特性也是一大亮点。同一套代码，既能在浏览器环境中通过 XMLHttpRequest 发送请求，也能在 Node.js 环境中使用原生的 http 模块。这种一致性减少了环境适配的麻烦。

快速上手安装

开始使用 Axios 非常容易。根据你的项目环境和包管理工具，选择以下任意一种方式安装。

使用 npm：

npm install axios

使用 yarn：

yarn add axios

使用 pnpm：

pnpm add axios

如果你在浏览器环境中想快速尝试，也可以直接通过 CDN 引入：

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

安装完成后，在模块中导入即可使用。在 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 实例，并为你设置正确的请求头。这让处理包含混合类型（文本和文件）的表单变得轻而易举。

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

在单页应用（SPA）中，一个常见的场景是用户在请求尚未完成时切换了页面，或者快速触发了多次搜索。这时，取消仍在进行的旧请求可以节省带宽并避免潜在的状态冲突。

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<User> {
  const response: AxiosResponse<User> = await axios.get(`/users/${id}`);
  return response.data; // response.data 的类型被推断为 User
}

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

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

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

开发必备：API 全流程管理神器 Apifox

介绍完上文的内容，我想额外介绍一个对开发者同样重要的效率工具 —— Apifox。作为一个集 API 文档、API 调试、API 设计、API 测试、API Mock、自动化测试等功能于一体的 API 管理工具，Apifox 可以说是开发者提升效率的必备工具之一。

 
如果你正在开发项目需要进行接口调试，不妨试试 Apifox。注册过程非常简单，你可以直接在这里注册使用。

注册成功后可以先看看官方提供的示例项目，这些案例都是经过精心设计的，能帮助你快速了解 Apifox 的主要功能。

 
使用 Apifox 的一大优势是它完全兼容 Postman 和 Swagger 数据格式，如果你之前使用过这些工具，数据导入会非常方便。而且它的界面设计非常友好，即使是第一次接触的新手也能很快上手，快去试试吧！