fetch、axios和Ajax

引言💭

我们知道请求一般有三种方式：fetch、axios和Ajax，那么该如何选择呢？

1. 基本概念与发展背景

AJAX（Asynchronous JavaScript and XML）
早期的网页主要是同步加载，用户每次点击都需要整页刷新。AJAX 技术的出现，让前端可以通过 XMLHttpRequest（XHR）在后台与服务器通信，只更新部分页面，大幅提升了用户体验。虽然名字里有 XML，但现在更多用 JSON 作为数据格式。AJAX 是浏览器内置的 API，无需安装。
Fetch
随着前端生态发展，XHR 的回调写法显得繁琐，缺乏链式调用，且不符合 Promise 风格。于是浏览器引入了 Fetch API，它基于 Promise，写法更简洁直观，能更好地和 async/await 搭配使用。缺点是对一些高级功能支持不足（如进度监听、超时设置）。
Axios
第三方团队基于 XHR 和 Fetch 封装的 HTTP 客户端。Axios 在社区中非常流行，几乎成为前端项目（尤其是 React、Vue 项目）的"标配"。它不仅支持浏览器环境，还能在 Node.js 和 React Native 中使用。Axios 提供了拦截器、自动处理 JSON、统一错误处理、请求取消、进度监控等高级功能。

👉 发展脉络总结：XHR → Fetch（更现代写法） → Axios（功能最全的封装库）。

2. 主要区别与特点

语法与代码简洁度
- AJAX 使用回调函数，嵌套多时容易形成"回调地狱"。
- Fetch 使用 Promise，支持链式调用和 async/await，语法更简洁。
- Axios 基于 Promise，进一步封装，写法最短。
数据处理方式
- AJAX：返回的是字符串，通常要手动 JSON.parse()。
- Fetch：提供 .json() 方法，稍微方便一些，但仍需显式调用。
- Axios：自动把响应转换为 JSON（如果是 JSON 格式），几乎不用手动处理。
错误处理机制
- AJAX：需要开发者自己检查 xhr.status 来判断成功与否。
- Fetch：默认只在网络错误时抛出异常，如果服务器返回 404/500，依然算作成功响应，需手动检查 response.ok。
- Axios：自动把 HTTP 错误（如 404、500）抛出，错误处理更自然。
高级功能支持
- 拦截器：只有 Axios 内置，能在请求/响应前统一处理，比如在请求头加 token。
- 取消请求 ：XHR 有 abort()；Fetch 要用 AbortController；Axios 内置支持 CancelToken 或 AbortController。
- 上传/下载进度：XHR 和 Axios 支持进度监听，Fetch 不支持。
- 跨域处理：
  - XHR 需设置 withCredentials。
  - Fetch 要配置 credentials: 'include'。
  - Axios 默认会自动携带 Cookie，使用更方便。
兼容性
- AJAX：所有浏览器都支持，包括旧版 IE。
- Fetch：仅现代浏览器支持，不兼容 IE。
- Axios：通过内部封装，兼容性较好，也能在 Node.js、React Native 中使用。

👉 一句话总结：Axios 功能最全面；Fetch 语法简洁；XHR 胜在兼容性。

3. 使用体验对比（代码示例）

(1) AJAX（XHR）

ini 复制代码

const xhr = new XMLHttpRequest();
xhr.open('GET', '/data');
xhr.onload = () => {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.response));
  } else {
    console.error('Error:', xhr.status);
  }
};
xhr.send();

➡️ 缺点：写法冗长，处理复杂请求时更麻烦。

(2) Fetch

javascript 复制代码

fetch('/data')
  .then(res => {
    if (!res.ok) throw new Error(res.status);
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('Error:', err));

➡️ 优点：语法简洁，天然支持 Promise。缺点：HTTP 错误需要手动处理。

(3) Axios

ini 复制代码

axios.get('/data')
  .then(res => console.log(res.data))
  .catch(err => console.error('Error:', err));

➡️ 优点：写法最短，自动处理 JSON 和 HTTP 错误，功能最全。

4. 选择建议

现代浏览器中的简单请求 → 直接用 Fetch，语法简单、原生支持。
需要高级功能（拦截器、全局错误处理、取消请求等） → 用 Axios，更省心。
兼容旧浏览器（IE 等） → Axios 或 jQuery.ajax，保证兼容性。
需要监控上传/下载进度（如文件上传） → 只能用 Axios 或 XHR。
跨平台开发（React Native / Node.js） → 推荐 Axios。

总结✒️

轻量请求 → Fetch
复杂场景 → Axios
兼容性优先 → XHR