Axios库在JavaScript中发送HTTP请求的快速上手

一、准备工作与环境引入

在使用 Axios 之前，首先需要将其引入到运行环境中。Axios 同时支持 Node.js 工程化项目（如 Vue、React、原生 Node 等）与传统纯 HTML 页面。

1. Node.js 与前端工程化环境安装

在基于 npm 或 yarn 的项目中，在项目根目录运行安装命令：

# 使用 npm 安装
npm install axios

# 或使用 yarn 安装
yarn add axios

在 JavaScript 文件或模块中按如下方式导入：

// ES Module 规范（现代前端框架中常见）
import axios from 'axios';

// CommonJS 规范（Node.js 原生环境常见）
const axios = require('axios');

2. 浏览器直接通过 CDN 引入

如果是简单的静态 HTML 页面，无需打包构建工具，可直接在 <head> 或 <body> 底部通过 <script> 标签引入公网 CDN 资源：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  // 引入后全局直接暴露 axios 对象
  console.log('Axios 载入成功:', typeof axios.get === 'function');
</script>

二、发送基础 GET 与 POST 请求

Axios 每一个请求方法都返回一个标准的 JavaScript Promise。开发者可以使用 .then() / .catch() 链式调用，也可以在 async 函数中使用 await 关键字，后者使异步代码更加扁平易读。

1. 发送 GET 请求并传递查询参数

GET 请求通常用于从服务端获取数据。如果需要向 URL 附带查询字符串（Query Parameters），应使用配置对象中的 params 属性，Axios 会自动将其拼接到 URL 后面，并完成编码：

import axios from 'axios';

async function fetchUserList(page, keyword) {
  try {
    // params 会自动格式化为: https://api.example.com/users?page=1&keyword=admin
    const response = await axios.get('https://api.example.com/users', {
      params: {
        page: page,
        keyword: keyword
      }
    });

    // 重点：Axios 已经将返回的 JSON 字符串自动解析为 JavaScript 对象
    console.log('状态码:', response.status);
    console.log('数据内容:', response.data);
    return response.data;
  } catch (error) {
    console.error('获取用户失败:', error.message);
  }
}

// 调用示例
fetchUserList(1, 'admin');

2. 发送 POST 请求并提交实体数据

POST 请求用于向服务器提交数据。axios.post 的第二个参数就是请求体（Request Body）。当传入普通 JavaScript 对象时，Axios 会默认设置请求头 Content-Type: application/json，并将对象自动序列化为 JSON 字符串：

async function createNewArticle(articleData) {
  try {
    const payload = {
      title: articleData.title,
      content: articleData.content,
      publishDate: new Date().toISOString()
    };

    const response = await axios.post('https://api.example.com/articles', payload);

    if (response.status === 201 || response.status === 200) {
      console.log('文章创建成功，服务端返回 ID:', response.data.id);
    }
  } catch (error) {
    console.error('提交文章失败:', error.message);
  }
}

3. 理解 Axios 响应对象（Response Schema）

与原生的 fetch 不同，Axios 成功回调中接收到的不是原始流，而是一个封装好的响应对象，其主要结构如下：

三、创建自定义实例与模块化管理

在实际生产开发中，不建议直接在业务代码各处随意调用全局 axios.get。因为项目通常拥有统一的 API 域名、特定的网关前缀以及固定的超时时间。通过 axios.create() 创建独立实例，可以实现请求参数的集中管理与多环境隔离。

// api/request.js
import axios from 'axios';

// 创建针对主业务接口的 Axios 实例
const apiClient = axios.create({
  baseURL: 'https://api.example.com/v1', // 接口基础路径
  timeout: 8000,                          // 超时时间：8 秒
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

// 在具体业务模块中直接复用该实例，只写相对路径
export async function getProductDetail(productId) {
  // 最终请求路径: https://api.example.com/v1/products/1001
  const response = await apiClient.get(`/products/${productId}`);
  return response.data;
}

四、请求拦截器与统一错误处理

拦截器（Interceptors）是 Axios 最强大的特性之一。它允许在请求发送到网络之前，或者在响应传递给业务 then/catch 之前，横向切入并执行公共逻辑。

1. 请求拦截器：动态添加鉴权头

通常用户登录后，所有后续请求都需要在 HTTP 标头中附带 Token。利用请求拦截器可以自动提取并注入，免去每个请求手动书写的繁琐：

// 添加请求拦截器
apiClient.interceptors.request.use(
  (config) => {
    // 从本地存储中读取 token
    const token = localStorage.getItem('access_token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 打印当前请求地址用于调试
    console.log(`[HTTP Request] 发起请求 -> ${config.method.toUpperCase()} ${config.url}`);
    return config;
  },
  (error) => {
    // 请求构造阶段发生错误
    return Promise.reject(error);
  }
);

2. 响应拦截器：数据解包与全局状态码分发

业务代码通常只关心 response.data 中的实际字段，而不希望每次都手动 res.data.data。同时，对于 401（未授权登出）、403（无权访问）、500（服务器内部故障）等异常，响应拦截器能提供统一的处理入口：

// 添加响应拦截器
apiClient.interceptors.response.use(
  (response) => {
    // HTTP 状态码为 2xx 时触发
    // 直接返回解包后的业务数据
    return response.data;
  },
  (error) => {
    // HTTP 状态码超出 2xx 或网络故障时触发
    if (error.response) {
      const { status, data } = error.response;
      switch (status) {
        case 401:
          console.warn('登录已失效，引导跳转至登录页');
          localStorage.removeItem('access_token');
          // 可在此处派发路由跳转
          break;
        case 403:
          console.error('权限不足，拒绝访问');
          break;
        case 500:
          console.error('服务端内部错误，提示用户稍后重试:', data.message || '未知故障');
          break;
        default:
          console.error(`请求异常 [${status}]:`, data);
      }
    } else if (error.request) {
      // 请求已发出但未收到任何响应（如网络中断、DNS 解析失败、超时）
      console.error('网络连接不可用，请检查网络设置或服务是否存活');
    } else {
      // 触发请求前发生内部错误
      console.error('配置错误:', error.message);
    }

    return Promise.reject(error);
  }
);

五、快速上手重点与避坑指南

初学者在使用 Axios 发送 HTTP 请求时，常常因概念混淆而遇到一些典型问题，在实际开发中需特别留意以下三点：

1. 传参位置混淆：params 与 data

这是最常见的使用错误：

• params：对应 URL Query 参数（如 ?id=123&type=normal），无论是 GET 还是 POST 请求，放入 params 的属性都会被拼接到 URL 上。
• data：对应 HTTP 请求体（Request Payload）。通常仅用于 POST、PUT、PATCH 请求。在 GET 请求中传 data 大多数后端和代理服务器将直接忽略。

2. 跨域问题（CORS）与 Axios 的关系

当在浏览器控制台看到 Access-Control-Allow-Origin 相关红字报错时，属于浏览器的同源安全策略拦截，而非 Axios 库本身的 Bug。解决方法需要在服务端配置允许跨域响应标头，或者在本地开发阶段（如 Vite、Webpack Dev Server）配置 proxy 代理转发。

3. 正确配置超时时间（timeout）

Axios 默认没有设置超时上限（timeout: 0，即无限等待）。在生产应用中务必指定合理的 timeout（如 5000 ~ 10000 毫秒），避免在移动网络波动或服务端无响应时，客户端界面无限期挂起处于死锁状态。