javascript Fetch API是什么_如何使用它

幻影之瞳 2025-12-24 00:00:00 次阅读

Fetch API 是浏览器内置的现代网络请求接口，基于 Promise，语法简洁，支持多种响应类型；注意其仅在网络失败时拒绝 Promise，HTTP 错误需手动检查 response.ok 或 status。

Fetch API 是浏览器内置的、用于发起网络请求的现代 JavaScript 接口，用来替代传统的 XMLHttpRequest。它基于 Promise，语法更简洁，逻辑更清晰，支持 JSON、文本、图片、流等多种响应类型。

Fetch 的基本用法

最简单的 GET 请求只需一行代码：

fetch('https://api.example.com/data') 返回一个 Promise，成功时解析为 Response 对象。

注意：fetch 只在**网络失败（如断网、DNS 错误）时拒绝 Promise**；HTTP 错误状态（如 404、500）仍会进入 then，需手动检查 response.ok 或 response.status。

用 .then(res => res.json()) 解析 JSON 响应
用 .then(res => res.text()) 获取纯文本
用 .catch(err => console.error(err)) 捕获网络异常

发送 POST 请求并传参

发送表单数据或 JSON 数据时，需配置 options 参数：

fetch('/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: 'admin', password: '123' })
})

method 默认是 GET，POST/PUT/DELETE 需显式声明
headers 控制请求头，发送 JSON 时通常要设 Content-Type
body 必须是字符串、FormData、Blob 或 URLSearchParams，不能直接传对象

处理错误与加载状态

实际项目中建议封装一层，统一处理常见逻辑：

检查 response.ok 判断 HTTP 状态是否在 200–299 范围
对非 2xx 响应抛出自定义错误，便于 catch 统一处理
添加超时控制（Fetch 本身不支持 timeout，可用 AbortController 实现）
配合 loading 状态变量，在 UI 上显示“加载中”或禁用按钮

与 async/await 结合更易读

用 async/await 替代链式 then，让异步代码像同步一样直观：

async function getUser() {
  try {
    const res = await fetch('/api/user');
    if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('获取用户失败:', err);
  }
}