Fetch API如何用于网络请求_它与Ajax有何不同【教程】_网络技术

Fetch 发 GET 请求直接调用 fetch(URL)，返回 Promise，需手动处理 JSON 解析、错误状态和中止逻辑；与 XMLHttpRequest 相比，它基于 Promise、不自动带 Cookie、响应体为单次读取的 ReadableStream。

Fetch API 怎么发 GET 请求

直接调用 fetch()，传入 URL 字符串即可发起 GET 请求。它返回一个 Promise，需要链式调用 .

then() 或用 await 处理响应。

默认只带基础请求头（如 Accept: */*），不自动携带 Cookie，需显式加 credentials: 'include'
响应体不会自动解析成 JSON，必须手动调用 response.json()
网络错误（如断网、DNS 失败）会 reject；但 HTTP 错误状态码（如 404、500）仍算 resolve，需检查 response.ok 或 response.status

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

Fetch 和 XMLHttpRequest（Ajax）的核心区别

Fetch 是浏览器原生的现代替代方案，不是对 XMLHttpRequest 的封装，二者设计哲学不同。

XMLHttpRequest 是事件驱动（onload、onerror）、可中断（abort()）、支持上传进度监听；fetch() 基于 Promise，不可中断（除非用 AbortController）
XMLHttpRequest 默认发送 Cookie（同源时），fetch() 默认不发，必须设 credentials: 'include'
XMLHttpRequest 能直接读取响应头和响应体原始内容；fetch() 的 Response 对象是只读流，多次读取会报错（如先 json() 再 text() 就失败）
上传文件时，XMLHttpRequest 可用 FormData 直接发；fetch() 同样支持，但需注意 Content-Type 会被浏览器自动设置为带 boundary 的 multipart，不能手动覆盖

如何中止 Fetch 请求

Fetch 本身不支持中止，但可通过 AbortController 实现等效效果。这是最常被忽略的兼容性要点——IE 完全不支持 AbortController，旧项目需降级或 polyfill。

创建 AbortController 实例，把它的 signal 传给 fetch() 的 signal 选项
调用 controller.abort() 即可中止请求，此时 fetch() 的 Promise 会以 AbortError reject
注意：中止后不能再复用该 signal，每次请求都应新建 AbortController

const controller = new AbortController();
fetch('/api/upload', {
  method: 'POST',
  body: formData,
  signal: controller.signal
})
.catch(err => {
  if (err.name === 'AbortError') {
    console.log('请求已被取消');
  }
});

// 例如 5 秒后取消
setTimeout(() => controller.abort(), 5000);

为什么 fetch 返回的 Response.body 是 ReadableStream

这是为了支持流式处理大响应体（如视频、日志流），避免一次性加载全部内容到内存。但这也意味着你不能反复读取它。

response.json()、response.text()、response.blob() 都会消费流，调用一次后流就关闭了
若需多次使用响应数据，要么缓存解析结果（如 const data = await response.json()），要么克隆流：response.clone().json()
服务端返回压缩内容（如 gzip）时，浏览器自动解压，ReadableStream 输出的是解压后的字节，无需手动处理

实际用起来，最大的坑不是语法，而是忘记检查 response.ok 就直接 .json()，或者在未 clone 的情况下重复读取响应体。这些错误在开发时不易暴露，上线后才突然报错。

# js # json # ajax # cookie # 浏览器 # 字节 # ai # 解压 # dns # stream # 状态码 # 区别 # 为什么 # red # 封装 # include

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】