FetchAPI对比AJAX请求教程

大家好，我们又见面了啊~本文《Fetch API使用教程：对比传统AJAX请求》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

Fetch API 默认不带 cookie、不自动处理 4xx/5xx 状态码、不支持超时控制；需手动检查 response.ok、设置 credentials、JSON.stringify() body、用 AbortController 实现超时等。

Fetch API 是浏览器原生提供的异步网络请求接口，比传统 XMLHttpRequest 更简洁、更符合现代 Promise 风格；但它**默认不带 cookie、不自动处理 4xx/5xx 状态码、不支持超时控制**——这些恰恰是很多人踩坑的起点。

fetch() 基本用法与常见错误

最简调用：fetch(url) 返回 Promise，但只在网络失败（如断网、DNS 错误）时 reject，404 或 500 仍会 resolve。必须手动检查 response.ok 或 response.status。

fetch('/api/user')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .catch(err => console.error('请求失败:', err));

• fetch() 默认不发送 Cookie，需显式加 credentials: 'include'
• POST 请求必须手动设置 Content-Type 头，否则后端可能收不到 body
• JSON 数据要先 JSON.stringify()，再传给 body，不能直接传对象

fetch 与 XMLHttpRequest 的关键差异

不是“谁更好”，而是“行为不同”。比如：

• XMLHttpRequest 支持 abort() 和 timeout 属性；fetch() 需靠 AbortController 实现中断，且原生无超时机制
• XMLHttpRequest 可监听上传进度（upload.onprogress）；fetch() 不提供上传进度 API（需流式读取 body 并自行计算）
• fetch() 的 redirect 默认为 'follow'，而 XMLHttpRequest 会自动跟随但不暴露重定向响应

如何安全地添加 token 和 cookie

两者不能混用：若后端要求鉴权头（如 Authorization），就别设 credentials: 'include'，除非明确需要同时发 cookie 和 token（极少见）。

• 只用 Bearer Token：

  fetch('/api/data', {
    headers: {
      'Authorization': 'Bearer <code>your-token-here</code>'
    }
  });

• 只用 Cookie：

  fetch('/api/data', {
    credentials: 'include'
  });

• 两者都用（需后端配合 CORS）：

  fetch('/api/data', {
    credentials: 'include',
    headers: {
      'Authorization': 'Bearer <code>your-token-here</code>'
    }
  });

fetch 没有超时？自己加个保险

这是最常被忽略的点——fetch() 本身不支持 timeout 参数，网络卡住时 Promise 会一直挂起。

• 用 AbortController + setTimeout 模拟超时：

  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 8000);
  
  fetch('/api/long-task', {
    signal: controller.signal
  })
    .then(r => r.json())
    .catch(err => {
      if (err.name === 'AbortError') {
        console.error('请求超时');
      }
    })
    .finally(() => clearTimeout(timeoutId));

• 注意：AbortController 在 Safari 15.4+ 才完全稳定，旧版需降级方案

真正难的不是写 fetch，而是记住它不会帮你做任何“合理假设”：不带 cookie、不判状态码、不设超时、不自动序列化 body——所有这些都得你一条条补上。

今天关于《FetchAPI对比AJAX请求教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！