当前位置：首页 > 文章列表 > 文章 > 前端 > FetchAPI对比AJAX请求教程

FetchAPI对比AJAX请求教程

2026-01-28 18:12:40 0浏览收藏

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

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

javascript的fetchapi如何使用_它与传统的ajax请求有何不同【教程】

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 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));