17370845950

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 的情况下重复读取响应体。这些错误在开发时不易暴露，上线后才突然报错。