FetchAPI教程：对比AJAX详解

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JavaScript Fetch API使用教程：与AJAX区别解析》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

Fetch API 是现代浏览器发起网络请求的标准方式，比 XMLHttpRequest 更简洁且基于 Promise；需手动检查 response.ok 并调用 .json()，POST 需设置 headers 和 JSON.stringify()，默认不带 Cookie，不支持超时和上传进度监听，IE 不兼容。

Fetch API 是现代浏览器中发起网络请求的标准方式，用起来比传统 AJAX（即 XMLHttpRequest）更简洁、更符合 Promise 语义。它不是 AJAX 的替代品，而是对 AJAX 思想的升级实现——核心目标一样：不刷新页面获取/提交数据，但写法、错误处理和默认行为差异明显。

Fetch 基本用法：从 GET 开始

最常见的是发一个 GET 请求获取 JSON 数据：

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

注意两点：fetch 不会因 HTTP 状态码报错（如 404、500），需手动检查 response.ok；它也不会自动解析 JSON，要显式调用 .json()。

发送 POST 请求并传 JSON 数据

发带数据的请求需要设置 method、headers 和 body：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: '我的新文章',
    body: '这是内容',
    userId: 1
  })
})
.then(res => res.json())
.then(data => console.log(data));

关键细节：必须手动设 Content-Type；JSON 数据要先 JSON.stringify()；fetch 默认不带 Cookie，如需携带要加 credentials: 'include'。

Fetch 和传统 AJAX（XMLHttpRequest）的主要区别

• 语法风格不同：Fetch 基于 Promise，天然支持 async/await；XMLHttpRequest 是事件驱动（onload/onerror），回调嵌套易出错
• 错误处理逻辑不同：Fetch 只在网络故障时 reject（如断网、DNS 失败），HTTP 错误码（4xx/5xx）仍进 then；XMLHttpRequest 在状态码非 2xx 时也会触发 onerror 或需手动判断
• 默认行为更“严格”：Fetch 默认不发 Cookie、不重定向（可配 redirect: 'follow'），而 XMLHttpRequest 默认跟随重定向、自动带 Cookie（同源时）
• 流式读取支持更好：Fetch 的 response.body 是 ReadableStream，适合处理大文件或实时数据；XMLHttpRequest 没有原生流支持

实际开发中要注意的坑

• 没有超时控制：Fetch 本身不支持 timeout，需用 AbortController 手动中断
• 不能直接上传进度：监听下载进度可用 response.body.getReader()，但上传进度需配合 FormData + XMLHttpRequest（目前仍是唯一通用方案）
• IE 完全不支持：如需兼容 IE，必须引入 polyfill（如 whatwg-fetch）或退回 XMLHttpRequest
• 重定向行为默认是 follow，但某些场景需禁用（比如想自己处理 302）：配置 redirect: 'manual'

基本上就这些。Fetch 不复杂但容易忽略细节，用熟了比写一堆 new XMLHttpRequest() 清爽得多。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。