FetchAPI如何替代AJAX？详细教程

Fetch API 并非颠覆 AJAX 的全新技术，而是对 XMLHttpRequest 的现代化封装，它以 Promise 为基础带来更简洁的异步体验，但也在 Cookie 携带、HTTP 错误处理、上传进度监听和中止机制等关键细节上与 XHR 存在实质性差异——理解这些差异（比如 fetch 对 404/500 不自动 reject、默认不发 cookie、无原生上传进度）才是写出健壮请求的核心；本文直击开发中极易踩坑的盲区，从错误处理模板到何时必须回归 XHR，再到 redirect 策略等隐藏陷阱，帮你避开“看似简单、实则翻车”的实战雷区。

Fetch API 是浏览器原生的异步网络请求接口，不是“替代 AJAX 的新方案”，而是 XMLHttpRequest（XHR）的现代化封装——它本身仍是 AJAX 的一种实现。

Fetch 和 XMLHttpRequest 本质区别在哪

Fetch 不是黑盒魔法，它用 Promise 封装了底层网络逻辑，而 XHR 是基于事件回调的老式 API。关键差异不在功能，而在控制粒度和错误处理行为：

• fetch() 默认不带 cookie，需显式传 { credentials: 'include' } 才能发带凭证的请求
• fetch() 只有网络失败（如断网、DNS 失败）才 reject，HTTP 状态码 404/500 仍 resolve，必须手动检查 response.ok 或 response.status
• XHR 能监听上传进度（upload.onprogress），Fetch 目前无法原生监听上传进度（需靠 ReadableStream + TransformStream 拆包模拟，复杂且兼容性差）
• Fetch 不支持同步请求（async: false 在 XHR 中已废弃，Fetch 根本不提供）

怎么写一个健壮的 fetch 请求（含错误处理）

直接调用 fetch() 很容易漏掉 HTTP 错误分支，下面是最小可用模板：

function apiGet(url) {
  return fetch(url, {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include'
  })
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      return response.json();
    })
    .catch(err => {
      // 网络异常 or JSON 解析失败 or 上面 throw 的 HTTP 错误
      console.error('Request failed:', err);
      throw err;
    });
}

// 使用
apiGet('/api/user')
  .then(data => console.log(data))
  .catch(err => alert('加载失败，请重试'));

注意：response.json() 本身也会 reject（比如返回非 JSON 内容），所以不能只依赖 response.ok 就认为数据一定可用。

什么时候不该用 Fetch，还得回头用 XHR

不是所有场景都适合一刀切换 Fetch：

• 需要上传大文件并显示进度条 → 用 XMLHttpRequest.upload.onprogress，Fetch 没原生支持
• 要中止请求（abort）但目标浏览器不支持 AbortController（IE 完全不支持，iOS Safari xhr.abort() 兼容性更好
• 需精细控制请求头（如设置 Connection: keep-alive 或自定义 Host）→ Fetch 会过滤部分危险 header，XHR 更开放（但也更易被滥用）
• 旧项目维护，已有大量 XHR 封装（如 jQuery.ajax）且无重构计划 → 强行替换收益低，风险高

真正容易被忽略的点：Fetch 的 redirect 默认策略是 'follow'，但某些鉴权流程依赖 302 不跳转来读取 Location header，这时得设 redirect: 'manual' 并自己处理响应；这个开关藏得深，出问题时很难联想到。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《FetchAPI如何替代AJAX？详细教程》文章吧，也可关注golang学习网公众号了解相关技术文章。