Fetch API怎么用？比AJAX好在哪？

Fetch API 是现代 JavaScript 中取代传统 AJAX（XMLHttpRequest）的标准网络请求方案，以原生 Promise 支持、清晰的 Request/Response 对象分离、更简洁的语法和对 async/await 的天然适配，显著提升了异步请求的可读性、可维护性和开发效率；尽管它默认不拒绝 HTTP 错误状态、缺乏内置超时和上传进度支持等细节需手动处理，但通过 AbortController 等机制可优雅补足，真正让网络请求从“写一堆模板代码”变成“几行直观逻辑”，是迈向现代化前端开发的关键一步。

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 的模板代码，现在几行就能搞定，而且更可靠、更易读。

今天关于《Fetch API怎么用？比AJAX好在哪？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！