Javascript如何进行网络请求_Fetch API和Ajax有什么区别？-js教程-PHP中文网

Javascript如何进行网络请求_Fetch API和Ajax有什么区别？

狼影

发布： 2025-12-19 12:57:07

原创

799人浏览过

Fetch API 是当前主流网络请求方案，比 XMLHttpRequest 更简洁现代，但默认不带 Cookie 且 404/500 不自动报错；需用 res.ok 判断、credentials: 'include' 携带 Cookie、AbortController 实现超时。

javascript如何进行网络请求_fetch api和ajax有什么区别？

JavaScript 中进行网络请求，现在主流用 Fetch API，它比传统 Ajax（基于 XMLHttpRequest）更简洁、更现代，底层能力更强，但默认不带 Cookie、错误状态也不自动抛错——这些是关键区别。

Fetch API 更简洁，但默认行为更“严格”

Fetch 使用 Promise，语法直观：

fetch('/api/users')
  .then(res => {
    if (!res.ok) throw new Error('请求失败');
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

登录后复制

注意：即使返回 404 或 500，res.ok 才是判断成功与否的依据，fetch 本身只在网络失败时才 reject。

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

常见配置项包括：

method: 'POST'、headers、body（需手动 JSON.stringify）
携带 Cookie 需显式写 credentials: 'include'
超时需靠 AbortController 实现（原生不支持 timeout 选项）

Ajax（XMLHttpRequest）更底层，兼容性更好

Ajax 是 Fetch 出现前的标准方式，写法冗长但可控性强：

与光AI

一站式AI视频工作流创作平台

查看详情

// 发送 POST 请求

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/login');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = () => {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send(JSON.stringify({ user: 'a', pass: 'b' }));

登录后复制

它的特点有：

原生支持同步请求（不推荐）、上传进度监听（xhr.upload.onprogress）
自动发送 Cookie（取决于同源策略和 withCredentials 设置）
IE7+ 全支持，Fetch 则需 IE 完全不支持（得靠 polyfill）

核心区别一目了然

对比维度：

错误处理：Ajax 在 onerror 或状态码异常时触发；Fetch 只在断网/跨域拒绝等网络层失败时 reject，HTTP 错误码（如 404）仍走 then
Cookie 默认行为：Ajax 默认发 Cookie；Fetch 默认不发，必须加 credentials: 'include'
响应读取：Ajax 用 responseText 或 responseXML；Fetch 统一用 res.json()、res.text()、res.blob() 等方法解析
取消请求：Ajax 用 xhr.abort()；Fetch 用 AbortController.signal