Axios 入门指南：从基础用法到实战技巧

前言

在前端项目里，几乎没有哪个工具像 Axios 这样"低调但高频"。它是我们跟后端打交道最常用的 HTTP 客户端，很多人用它的方式可能就是简单的 .get() 或 .post()，但它能做的远不止这些。

这篇文章不谈架构设计，也不讲封装套路，只聊 Axios 的基础能力、使用方式以及你日常开发中该知道的那些点。说白了，就是让你对 Axios 有个彻底了解，用起来心里有底。

什么是 Axios？

简单说，Axios 是一个基于 Promise 的 HTTP 请求库，支持浏览器和 Node.js 环境。你可以把它理解成是 XMLHttpRequest 和 fetch 的升级版，更易用、更可控、也更成熟。

它本质上是把很多常用的 HTTP 功能做了封装，帮你省下不少重复劳动。

最基础的用法：GET 和 POST

php 复制代码

import axios from 'axios';

// GET 请求
axios.get('/api/user?id=1');

// POST 请求
axios.post('/api/user', {
  name: '张三',
  age: 24
});

如果你不想用 .get() 这种语法，也可以直接传一个配置对象：

php 复制代码

axios({
  method: 'post',
  url: '/api/user',
  data: {
    name: '李四'
  }
});

注意，GET 请求的参数是放在 params 字段里的，而 POST、PUT 等请求则是用 data 字段。

返回结果长啥样？

Axios 请求返回的是一个 Promise，成功时你会拿到一个 response 对象，大概长这样：

javascript 复制代码

axios.get('/api/user/1').then((res) => {
  console.log(res.data);    // 后端返回的数据主体
  console.log(res.status);  // HTTP 状态码，比如 200
  console.log(res.headers); // 响应头
});

你最常用的其实就是 res.data，绝大多数时候就是你要的数据。

怎么设置全局配置？

有些配置我们不想每次都写一遍，比如 baseURL、token、超时时间，这时候就可以统一配置：

ini 复制代码

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 8000;
axios.defaults.headers.common['Authorization'] = 'Bearer xxx';

也可以在单次请求中覆盖默认配置：

csharp 复制代码

axios.get('/user', {
  headers: {
    'Authorization': 'Bearer abc123'
  }
});

请求和响应拦截器

拦截器是 Axios 特别好用的一个功能，你可以在请求发出去之前或响应回来之后，统一做处理。

请求拦截器：加 token、加 loading 状态

ini 复制代码

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

响应拦截器：统一报错处理

javascript 复制代码

axios.interceptors.response.use(
  (res) => {
    return res;
  },
  (error) => {
    if (error.response?.status === 401) {
      console.warn('登录过期，跳转登录页');
      window.location.href = '/login';
    } else {
      console.error('请求失败', error.message);
    }
    return Promise.reject(error);
  }
);

常见错误处理方式

网络请求大概率不会每次都成功，你得处理好各种异常：

javascript 复制代码

axios.get('/api/user/9999').catch((err) => {
  if (err.response) {
    console.log('后端有响应，但出错了', err.response.status);
  } else if (err.request) {
    console.log('请求已发出，但没有收到响应');
  } else {
    console.log('设置请求时出错', err.message);
  }
});

你最好把这套逻辑封装成统一的处理函数，否则写十次也不嫌累。

如何取消请求？

有些场景你需要手动取消请求，比如组件卸载后不想处理结果，或者切换搜索关键词时取消旧请求。

Axios v1 之后推荐用原生的 AbortController：

arduino 复制代码

const controller = new AbortController();

axios.get('/api/search', {
  signal: controller.signal
});

controller.abort(); // 取消请求

并发请求

你可以同时发多个请求，然后统一处理结果：

kotlin 复制代码

axios.all([
  axios.get('/api/user'),
  axios.get('/api/product')
]).then(
  axios.spread((userRes, productRes) => {
    console.log(userRes.data, productRes.data);
  })
);

和 fetch 比，Axios 好在哪？

功能	Axios	fetch
默认 JSON 解析	✅	❌（需手动 `.json()`）
拦截器	✅	❌
请求取消	✅	✅（都支持 AbortController）
超时设置	✅（直接支持）	❌（需手写封装）
错误处理	✅（统一封装）	❌（需手写很多逻辑）

虽然现在浏览器原生的 fetch 越来越好用了，但 Axios 依然是项目实战中效率更高的选择，尤其适合中大型项目。

最后

Axios 看起来简单，其实细节不少。本文讲的只是它的基础能力，但这部分基础如果你理解透了，后续无论是封装、架构，还是对接各种奇葩接口格式，都能应对自如。