FetchAPI使用详解及对比AJAX优势分析

从现在开始，我们要努力学习啦！今天我给大家带来《Fetch API怎么用？相比AJAX优势在哪》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

Fetch API 是现代 JavaScript 发起网络请求的标准方式，比 XMLHttpRequest 更简洁、强大且契合 Promise/async-await；它默认不 reject HTTP 错误状态，需手动检查 response.ok 或 status，并支持配置 method、headers、body 等选项，但不原生支持超时和上传进度。

Fetch API 是现代 JavaScript 中发起网络请求的标准方式，比传统 AJAX（基于 XMLHttpRequest）更简洁、更强大，也更符合 Promise 和 async/await 的编程习惯。

Fetch 基本用法：发个 GET 请求

最简单的用法就是调用 fetch(url)，它返回一个 Promise：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('请求失败:', error));

注意：fetch 只在**网络错误（如断网、DNS 失败）时 reject**；HTTP 错误状态（如 404、500）仍会 resolve，需要手动检查 response.ok 或 response.status：

• response.ok 是布尔值，true 表示状态码在 200–299 范围内
• response.status 返回具体状态码，比如 404、500
• response.headers 可读取响应头，response.url 是最终实际请求的 URL（含重定向后地址）

带配置的 POST 请求：传 JSON 数据

发送带参数的请求，需传入第二个参数——配置对象：

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'alice', password: '123' })
})
.then(res => {
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));

• method 默认是 GET，常用值还有 POST、PUT、DELETE
• headers 必须显式设置 Content-Type，尤其是传 JSON 时
• body 只接受字符串、FormData、Blob、URLSearchParams 等可读流类型，不能直接传对象

Fetch 比传统 AJAX 好在哪？

不是“更好用”，而是“更现代、更一致、更易维护”：

• 原生 Promise 支持：不用手动封装回调，天然适配 async/await，代码扁平不嵌套
• 分离关注点更清晰：Request 和 Response 是独立对象，各自有方法（如 response.clone()、request.redirect），逻辑更解耦
• 默认不带 Cookie：安全性更高；如需携带 Cookie，加 credentials: 'include' 即可
• 内置流式读取支持：可用 response.body.getReader() 处理大文件或实时数据流（如 SSE、下载进度）
• 无 IE 兼容包袱：设计之初就面向现代浏览器（Edge 18+、Chrome 42+、Firefox 39+），避免了 XMLHttpRequest 的历史缺陷（如上传事件绑定麻烦、超时控制别扭）

要注意的坑

Fetch 不是万能的，有些场景仍需小心处理：

• 不支持请求超时（需用 AbortController 手动中断）
• 没有内置的 progress 事件（上传进度需配合 XMLHttpRequest 或使用第三方库）
• 无法取消已发出的请求（但 AbortController 可中止未完成的 fetch）
• IE 完全不支持，需引入 polyfill（如 whatwg-fetch）

简单超时控制示例：

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

fetch('/api/data', { signal: controller.signal })
  .then(r => r.json())
  .catch(err => {
    if (err.name === 'AbortError') console.log('请求超时');
    else console.error(err);
  });

不复杂但容易忽略。用熟了 Fetch，你会发现以前写一堆 XMLHttpRequest 的模板代码，现在几行就能搞定，而且更可靠、更易读。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~