javascript的fetchapi如何使用_它与传统的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（极少见）。

立即学习“Java免费学习笔记（深入）”；

• 只用 Bearer Token：

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

• 只用 Cookie：

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

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

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

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——所有这些都得你一条条补上。