前言
在之前的文章中，我们详细介绍了XMLHttpRequest对象，它作为早期Web请求技术的代表，广泛应用于各种前端开发项目中；尽管其功能强大且兼容性好，但它的语法复杂，且不支持现代的Promise和流处理，使得代码在处理异步请求时显得臃肿和难以维护
为了解决这些问题，Fetch API应运而生，它是现代Js提供的用于发起HTTP请求的新标准，旨在简化和改进前端与服务器之间的数据交互；不仅具有更简洁的语法，还原生支持Promise，使得异步操作的处理更加优雅和高效
简介
Fetch API是一种用于发起HTTP请求并处理响应的接口，由浏览器原生支持，它基于Promise，使得处理异步操作更加简洁和直观，同时适用于大多数现代浏览器，并逐渐成为替代XMLHttpRequest的主流选择
为了克服XMLHttpRequest的缺点，Fetch API在2014年由W3C提出，并在2015年初步实现，最终在2017年正式成为W3C的推荐标准，是现代 Web 请求的新标准，其旨在替代 XHR，并提供更好的可扩展性和灵活性
它的设计目标是提供一种更简洁、更直观的方式来进行HTTP请求，同时利用现代Js特性，如Promise
兼容性
在大部分现代化主流浏览器，其支持性都很好
特点
简洁的语法：相较于XMLHttpRequest，Fetch API的语法更加简洁和易读
原生 Promise 支持：使用Promise进行异步操作处理，提供了更好的错误处理和链式调用支持
更好的灵活性：支持流处理、跨域请求等高级功能，在处理大数据和文件上传时更加方便
扩展性：可以通过Request和Response对象进行扩展和自定义，具有更高的可控性
基础语法
Fetch API的基本用法非常简单，只需通过fetch()函数发起请求并处理响应
fetch()采用模块化设计，API分散在多个对象上，如：Response对象、Request对象、Headers对象
fetch()主要可接收两个参数：
- resource：表示要请求的资源
- 可以是一个字符串或URL对象
- 也可以是一个Request对象
- options：(可选)用于设置请求的各种选项，主要的属性如下：
- method：(string)HTTP 请求方法，如GET、POST等。默认值为GET
- headers：(Headers|object)表示请求头信息
- body：(Blob|FormData|URLSearchParams|string等)表示请求体的内容，主要用于POST等的请求
- mode：(string)表示请求的模式，用于决定请求的范围和访问权限；如：cors(支持跨域请求)、no-cors(仅允许请求有限的资源)、same-origin(仅允许同源请求)等
- cache：(string)表示缓存模式
- credentials：(string)表示凭据模式，用于决定是否发送Cookie和HTTP授权标头(fetch请求默认不会带上 Cookie)
- redirect：(string)表示重定向模式
- signal：(AbortSignal)可用于设置控制取消请求
通过传入不同的参数，可以灵活配置Fetch API的请求，满足各种需求
GET请求
fetch默认即为GET请求
fetch()会返回一个Promise对象，其也可以用async-await语法改写，使代码更易读
fetch()的Promise会返回一个Response对象，其包含本次请求的响应数据
Response对象
表示一次请求的响应，可用于读取和处理响应数据
属性
ok：布尔值，用于表示响应的成功状态(即状态码在200-299范围内)
status：HTTP 状态码(如200表示成功，404表示未找到)
statusText：对应于 HTTP 状态码的状态消息
url：响应的 URL，一般情况下与请求 URL 一致
type：表示响应的类型，可能的值为：
- basic：来自同源的标准 HTTP 响应
- cors：由 CORS 请求返回的响应
- default：请求没有被捕获或未修改的响应
- error：网络错误时返回的响应
- opaque：来自不同源的请求且不支持 CORS 时返回的响应
headers：为一个Headers对象，包含响应头信息，是一个可迭代对象
- get(name)：获取指定 header 的值(字符串)
- has(name)： 判断是否存在指定的 header
- set(name, value)：替换或添加指定的 header 的值
- append(name, value)：给现有 header 追加值，或添加不存在的 header 并赋值
- delete(name)：删除指定 header
- keys()：返回一个迭代器，包含所有存在的 header 名
- values()：返回一个迭代器，包含所有存在的 header 的值
- entries()：返回一个迭代器，包含所有 header 即其值的键值对[key, value]
redirected：布尔值，表示请求是否被重定向
body：一个ReadableStream对象，表示响应体内容，是一个可处理可读流数据的接口，主要用于以增量方式读取和处理数据(如显示下载进度)
- 在处理大数据量或实时数据流时特别有用，如从网络请求读取视频、音频或大型文件，可根据需要逐步处理数据，无需等待所有数据加载完成再一次性处理所有数据
bodyUsed：布尔值，表示响应体是否已经被读取
方法
clone()：创建并返回一个Response对象的副本
- Response对象只能读取一次(流处理后就没了)，即blob、text、json等异步结果获取方法只能使用一个，否则就会报错
error()：返回一个新的错误响应
redirect(url, status)：返回一个新的重定向响应
arrayBuffer()：返回一个Promise，该Promise解析为一个包含响应体内容的二进制ArrayBuffer对象
blob()：返回一个Promise，主要包含响应体内容的Blob对象
formData()：返回一个Promise，主要包含响应体内容的FormData对象
text()：返回一个Promise，主要包含响应体内容的文本字符串
json()：返回一个Promise，主要包含响应体内容的JSON对象
POST请求
POST请求需要在options中指定方法和请求头，如需传递数据需放在body内
错误处理
Promise.resolve(即进入.then)并不代表请求一定成功，fetch只会在网络错误时reject(即进入.catch)，HTTP 错误(如 404、500)仍然会被认为是成功的请求(resolved状态)，判断请求是否成功需通过Response.ok等信息
取消请求
fetch请求发送以后，可以中途取消
并发请求
通过配合Promise.all()方法，可以并发发起多个请求
对比
语法和使用体验：Fetch API的语法更加简洁和现代，使用Promise进行异步处理，使代码更易读和维护
性能和效率：Fetch API的性能和效率在大多数情况下优于XMLHttpRequest，特别是在处理流数据和并发请求时
实际应用场景：Fetch API适用于现代 Web 开发中的大多数场景，而XMLHttpRequest由于其广泛的兼容性，仍然在一些老项目中具有应用价值
总结
Fetch API作为现代化 Web 请求的标准，具有简洁的语法、原生的Promise支持和强大的灵活性，使其在前端开发中能够得到广泛的应用；尽管在一些老项目中XMLHttpRequest仍然有其应用价值，但对于大多数现代 Web 开发的需求，Fetch API会是一个更优雅和高效的选择，掌握 Fetch API 的基本和高级用法，可以在实际项目中高效地处理各种 HTTP 请求，提升开发效率和代码质量
参考资料
Options 参数详解：https://developer.mozilla.org/en-US/docs/Web/API/RequestInit
Response 对象详解：https://developer.mozilla.org/zh-CN/docs/Web/API/Response