Fetch API

Fetch API 是现代浏览器内置的网络请求接口,提供了一个全局 fetch 函数,用于发起 HTTP 请求并以 Promise 形式返回响应结果。它设计简洁、语义清晰,是取代早期 XMLHttpRequest 的标准化方案。

概述

在 Fetch API 出现之前,前端主要通过 XMLHttpRequest 发送异步请求,但其回调式写法繁琐、易产生嵌套。Fetch 由 WHATWG 制定并纳入标准,基于 Promise 构建,配合 async/await 可写出扁平、易读的异步代码。它同时定义了 Request、Response、Headers 等一组标准对象,统一了请求与响应的处理模型。

核心特点

• 基于 Promise,天然支持链式调用与 async/await。
• 请求返回的 Response 对象只有在网络失败时才 reject,HTTP 错误状态码(如 404、500)仍视为成功,需通过 ok 或 status 字段自行判断。
• 支持流式读取响应体,可处理大文件与实时数据。
• 通过 AbortController 实现请求取消。
• 可配置跨域模式、缓存策略、凭证携带等选项。

应用场景

Fetch API 是前端数据请求的基础设施,广泛用于调用后端接口、加载 JSON 数据、上传下载文件等。各类请求库(如 Axios)在浏览器环境中也常以 Fetch 或 XMLHttpRequest 作为底层实现。在 Service Worker 中,Fetch 更是拦截和代理网络请求、实现离线缓存的核心机制。

常见问题

问:为什么 fetch 遇到 404 不会报错?答:Fetch 只在网络层面失败(如断网、跨域被拒)时才 reject,HTTP 状态码属于成功收到响应的范畴。开发者需检查 response.ok 或 status 来判断业务是否成功。

问:fetch 请求默认会带上 Cookie 吗?答:同源请求默认携带,跨域请求需将 credentials 选项设为 include 才会发送凭证,且服务端也要正确配置跨域响应头。