前言

在之前的文章中，我们详细介绍了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