CodeWalk

fetch API 的用法和特点是什么？如何取消 fetch 请求？

作者：孤独的心 · 2026-05-30 12:55

请说明 fetch API 的基本用法、请求配置、响应处理，以及如何使用 AbortController 取消请求。

回答

孤独的心

基本用法：

const response = await fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' }),
  credentials: 'include',  // 跨域携带 Cookie
  signal: controller.signal // 取消信号
});

if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();

特点：

  • 基于 Promise，更简洁现代
  • 默认不带 Cookie（需 credentials: 'include'）
  • 网络错误才 reject，HTTP 4xx/5xx 不 reject（需检查 response.ok）
  • 不提供超时机制（需配合 AbortController 或 Promise.race）
  • 支持 Stream（response.body.getReader() 流式读取）

取消请求（AbortController）：

const controller = new AbortController();

// 3 秒超时
setTimeout(() => controller.abort(), 3000);

try {
  const res = await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === 'AbortError') console.log('请求已取消');
}

fetch vs axios：

  • fetch 是原生 API，无需安装
  • axios 自动 JSON 解析、超时、拦截器、CSRF 保护更完善
  • fetch 的请求取消需手动 AbortController