深入解析WHATWG Fetch标准：现代Web资源获取的核心机制-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00135/article/details/148891013

深入解析WHATWG Fetch标准：现代Web资源获取的核心机制

fetch Fetch Standard 项目地址: https://gitcode.com/gh_mirrors/fetc/fetch

概述

WHATWG Fetch标准定义了现代Web平台中资源获取的统一架构，它规范了请求(Request)、响应(Response)以及将它们绑定在一起的获取(fetching)过程。作为Web平台的基础设施，Fetch标准为各种网络操作提供了底层抽象，是XMLHttpRequest的现代化替代方案。

设计目标

Fetch标准的主要目标是统一Web平台中的资源获取行为，确保不同API在处理以下方面时保持一致性：

URL方案处理：统一处理不同协议的资源获取
重定向机制：规范HTTP重定向的处理流程
跨源语义：明确跨域请求的安全限制
安全策略：整合内容安全策略(CSP)和混合内容处理
元数据管理：标准化获取元数据的处理方式
服务工作线程：与服务工作者(Service Worker)的交互规范
引用来源：统一Referer头的处理逻辑

核心概念

请求与响应模型

Fetch标准采用简单的请求-响应模型：

请求(Request)：包含目标URL、方法、头部等信息
响应(Response)：包含状态码、响应头和响应体等
获取过程(Fetching)：连接请求和响应的中间处理流程

凭证管理

Fetch标准明确定义了三种类型的凭证：

HTTP Cookies：用于会话状态管理
TLS客户端证书：用于客户端身份验证
HTTP认证条目：用于基本认证和摘要认证

基础设施

Fetch参数(Fetch Params)

Fetch参数是获取算法使用的内部数据结构，包含以下关键字段：

| 字段名称 | 类型 | 描述 | |---------|------|------| | request | 请求对象 | 要处理的请求 | | process request body chunk length | 算法/null | 处理请求体分块的逻辑 | | task destination | 全局对象/并行队列/null | 任务执行环境 | | controller | Fetch控制器 | 控制获取过程的对象 | | timing info | 计时信息 | 资源获取的时间记录 |

Fetch控制器(Fetch Controller)

Fetch控制器允许调用者在获取过程开始后执行特定操作：

interface FetchController {
  state: "ongoing" | "terminated" | "aborted";
  fullTimingInfo: FetchTimingInfo | null;
  reportTimingSteps: Function | null;
  serializedAbortReason: Record | null;
}

控制器提供三种主要操作：

终止(terminate)：正常结束获取过程
中止(abort)：异常终止获取过程
报告计时(report timing)：记录获取过程的时间信息

计时信息(Fetch Timing Info)

计时信息结构用于资源计时和导航计时，包含以下关键时间点：

开始时间(start time)：获取过程启动时间
重定向时间(redirect start/end time)：处理重定向的时间段
网络请求时间(network-request start time)：实际网络请求开始时间
响应开始时间(network-response start time)：接收到响应的时间
结束时间(end time)：获取过程完成时间

URL处理规范

Fetch标准定义了以下URL方案分类：

本地方案(Local Scheme)：
- about: - 关于浏览器内部页面
- blob: - 二进制大对象URL
- data: - 内联数据URL
HTTP(S)方案：
- http: - 标准HTTP协议
- https: - 安全HTTP协议
获取方案(Fetch Scheme)：
- 包含所有本地方案
- 增加file: - 本地文件协议
- 包含HTTP(S)方案

HTTP规范适配

虽然Fetch标准不仅限于HTTP，但它大量借鉴了HTTP的概念并应用于其他协议资源：

空白字符处理：
- 制表符(U+0009)
- 空格(U+0020)
- 换行符(U+000A LF, U+000D CR)
引用字符串收集：
- 处理HTTP头中的引用字符串
- 支持转义字符处理
- 提供值提取功能

实际应用

与现有API的关系

Fetch标准为以下Web API提供了统一的获取基础：

HTML的<img>和<script>元素
CSS的cursor和list-style-image属性
JavaScript的navigator.sendBeacon()和self.importScripts()

fetch() API

Fetch标准定义了fetch() JavaScript API，提供了底层的网络功能抽象：

// 基本使用示例
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));