前言
在前端项目里，几乎没有哪个工具像 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 看起来简单，其实细节不少。本文讲的只是它的基础能力，但这部分基础如果你理解透了，后续无论是封装、架构，还是对接各种奇葩接口格式，都能应对自如。