🏹 前言：当我拥有了 fetch，却还是心系 axios
当我刚学会 fetch 的那一刻，内心是激动的。
我在掘金打卡、在项目里练手，用 async/await 写得比谁都顺。但就在我以为已经天下无敌的时候，突然在某个 Vue、React 的项目中看到了这个陌生又高频的词：
import axios from 'axios';
“这是哪位大佬？”我小声嘀咕。
直到我开始写大型项目，处理复杂 headers、携带 cookie、拦截请求、自动转换 JSON、统一异常处理……我才明白：
Axios：是为开发者省心而生的现代化通信神器。
今天，就让我带你看看 Fetch → Axios 的进阶之旅，就像三国演义中的“诸侯混战”，终究要选出谁最适合称王！
🎬 第一幕：Fetch 其实挺香的，但它不太体贴
✅ 优点复习下（你应该还记得）：
- API 简洁，Promise 原生支持
- 默认是现代浏览器推荐方式
- 支持
async/await写法，结构清晰 - 错误处理更灵活（try/catch）
❌ 但缺点也不少：
| 问题 | 原因 |
|---|---|
| ❌ 不能自动处理 JSON 错误 | 需要手动调用 .json()，否则得不到数据 |
| ❌ 不支持请求拦截、统一处理逻辑 | 每个请求都得手写 try/catch，很费劲 |
| ❌ 请求取消不方便 | 要手动用 AbortController |
| ❌ 默认不携带 cookie | 必须设置 credentials: 'include' |
| ❌ 错误状态不会抛异常 | status !== 200 时也会进入 then，需额外判断 |
虽然写起来优雅，但用多了就像“谈恋爱不做家务”的类型：好是好，就是不够贴心。
🔥 第二幕：Axios 登场，一身封装，自动化全拉满
✅ Axios 的优势：
| 特性 | 是否支持 | 说明 |
|---|---|---|
| 自动解析 JSON | ✅ | 响应数据直接是对象，不用 .json() |
| 拦截器 | ✅ | 请求和响应可以统一拦截处理 |
| 请求取消 | ✅ | 使用 CancelToken 或 AbortController |
| 全局配置 | ✅ | 统一设置 baseURL、headers、timeout 等 |
| 默认带 cookie | ✅ | 支持跨域时自动带上凭证 |
| 错误处理清晰 | ✅ | 直接进入 .catch()，少写判断 |
⚙️ 第三幕：Axios 实战操作演练
🌱 安装 Axios
npm install axios
或者 CDN：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
🧪 发送 GET 请求（超简单）
axios.get('https://api.example.com/data')
.then(res => console.log(res.data))
.catch(err => console.error(err));
注意：不需要 res.json()，Axios 自动处理！
🧃 发送 POST 请求（更智能）
axios.post('https://api.example.com/user', {
name: '诸葛亮',
role: '军师'
})
.then(res => console.log(res.data))
.catch(err => console.error(err));
连 Content-Type 都自动设置好了，别太贴心！
⚒ 配置全局默认值（统一设定）
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 5000;
以后请求你只需要写 /user、/list，不用重复拼接 URL。
🛡 拦截器（全局处理请求 & 响应）
// 请求拦截
axios.interceptors.request.use(config => {
console.log('请求发出前：', config);
return config;
}, error => Promise.reject(error));
// 响应拦截
axios.interceptors.response.use(response => {
console.log('响应回来啦：', response);
return response;
}, error => {
console.error('响应错误：', error);
return Promise.reject(error);
});
你可以统一给请求加 token、统一处理 401 登录失效等等，巨省事。
⛔ 取消请求
const controller = new AbortController();
axios.get('/long-request', {
signal: controller.signal
})
.then(res => console.log(res.data))
.catch(err => console.error('取消或错误:', err));
// 触发取消
controller.abort();
🤺 第四幕：三国对比大乱斗！（XHR vs Fetch vs Axios）
| 特性 | XHR | Fetch | Axios |
|---|---|---|---|
| 是否基于 Promise | ❌ | ✅ | ✅ |
| 自动 JSON 解析 | ❌ | ❌ | ✅ |
| 错误抛出 | ❌ | ❌ | ✅ |
| 拦截器 | ❌ | ❌ | ✅ |
| 请求取消 | ❌ | ⚠️ 麻烦 | ✅ 简洁 |
| 默认带 cookie | ❌ | ❌ | ✅ |
| 配置全局 baseURL | ❌ | ❌ | ✅ |
| 用起来的舒适度 | 🥵 | 😎 | 😍 |
| 面试中出现频率 | 🔥🔥 | 🔥🔥🔥 | 🔥🔥🔥🔥🔥 |
🧠 面试官可能会问的几个灵魂问题
-
Axios 与 Fetch 有什么区别？
- 结构、错误处理、拦截器、自动转换、全局配置等方面都比 Fetch 更高级封装。
-
Axios 能被 Fetch 替代吗？
- 理论上可以，但 Fetch 要配合大量封装、拦截器、封装工具函数才具备同等易用性。
-
项目中是否建议直接用 Axios？
- 是，特别是多人协作项目，Axios 更容易统一结构、管理异常。
🧭 总结：写请求的路上，没人能永远原始，但你要知道每一步为什么升级
✅ 学会 XMLHttpRequest = 明白底层请求流程
✅ 学会 Fetch = 掌握现代通信的语法 & Promise
✅ 学会 Axios = 真正进入“项目工程化”阶段
Axios 是现代前端项目中不可或缺的一员，特别适合团队协作、大型业务逻辑统一处理。虽然它只是“封装好的 Fetch + 功能拓展”，但正是这份贴心、便捷、统一的体验，让它成为三国中的“刘备”，聚人心、能打仗、好管理！
🧩 彩蛋：Axios 封装模板（适合项目使用）
// api.js
import axios from 'axios';
const service = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
service.interceptors.request.use(config => {
// 加 token、日志等
return config;
});
service.interceptors.response.use(res => {
return res.data;
}, err => {
console.error('统一错误处理:', err);
return Promise.reject(err);
});
export default service;
使用：
import api from './api';
api.get('/user').then(console.log);
api.post('/login', { username: 'js', pwd: '123456' });
🧃 后记：JS 小白的前端修炼录还在继续
- 你不是只学 API，而是在构建属于自己的工具箱
- 技术之路，没有一步是白走的，每个 XHR、每个 Fetch、每个 Axios 都是基石
- 从写 hello world 到能封装请求库，这就是成长的证明！
