普通Fetch和Fetch 流式的区别？

一、Fetch 流式的核心定义Fetch 流式Fetch Streaming是基于浏览器原生Fetch API实现的流式数据处理能力普通 Fetch 请求服务端返回完整的响应数据前端一次性接收所有数据后才能处理比如res.json()/res.text()都是一次性解析Fetch 流式服务端通过 HTTP Chunked分块传输编码返回数据Fetch 请求的响应体response.body会返回ReadableStream可读流对象前端可以逐块读取服务端发送的「数据块」边接收、边解析、边处理无需等待整个响应完成。核心原理一句话讲透Fetch 流式的底层是「HTTP 分块传输 浏览器 Streams API」的组合服务端开启 HTTP Chunked 编码将数据切分成多个独立的「数据块」逐个发送给前端前端 Fetch 拿到响应后response.body暴露为ReadableStream可读流前端通过流的读取器reader逐块读取这些数据实现流式处理。二、Fetch 流式的核心用法极简代码示例Fetch 流式的核心是操作response.bodyReadableStream以下是最常见的 2 个场景场景 1流式读取文本 / JSON 数据比如实时日志、大模型打字机效果123456789101112131415161718192021222324252627282930313233343536async function streamFetchText(url) {// 1. 发起 Fetch 请求constresponse await fetch(url);// 校验确保响应有效且支持流式response.body 是 ReadableStreamif(!response.ok || !response.body) {thrownewError(请求失败或不支持流式响应);}// 2. 获取流的读取器constreader response.body.getReader();// 3. 二进制流转文本的解码器关键stream: true 保证分块解码不乱码constdecoder newTextDecoder(utf-8, { stream:true});try{// 4. 循环逐块读取数据流式核心逻辑while(true) {// done: 是否读取完成value: 当前数据块Uint8Array 二进制格式const{ done, value } await reader.read();if(done)break;// 读取完成退出循环// 5. 实时处理当前数据块比如渲染到页面、解析JSONconstchunkText decoder.decode(value);console.log(实时读取的内容块, chunkText);// 示例实时追加到页面模拟大模型打字机效果document.getElementById(content).textContent chunkText;}}finally{// 6. 释放读取器关键避免内存泄漏reader.releaseLock();}}// 调用示例比如请求返回流式文本的接口streamFetchText(/api/stream-log);场景 2流式下载大文件避免内存溢出12345678910111213141516171819async function streamDownloadFile(url, fileName) {constresponse await fetch(url);if(!response.ok || !response.body)thrownewError(下载失败);// 1. 将流式响应体转为 Blob浏览器自动拼接分块数据constblob awaitnewResponse(response.body).blob();// 2. 创建下载链接并触发下载constdownloadUrl URL.createObjectURL(blob);consta document.createElement(a);a.href downloadUrl;a.download fileName;a.click();// 3. 清理资源URL.revokeObjectURL(downloadUrl);}// 调用示例下载1GB的大文件streamDownloadFile(/api/download/large-file,超大文件.zip);三、Fetch 流式的核心使用场景大文件下载下载 100MB 的文件时流式下载仅占用少量内存避免一次性加载导致的页面卡顿 / 内存溢出实时数据接收接收服务端推送的实时日志、后台任务进度、大模型的流式响应打字机效果超大 JSON 解析服务端返回百万条数据的 JSON 列表时流式逐块解析实时渲染到页面比如表格二进制流处理流式读取图片 / 视频等二进制文件实时预览或处理比如图片压缩。四、Fetch 流式 vs 普通 Fetch 的核心区别总结核心本质Fetch 流式是 Fetch API 结合 HTTP Chunked 分块传输通过response.bodyReadableStream实现的逐块数据处理能力核心价值解决大文件 / 实时数据一次性加载导致的「内存溢出、页面卡顿、等待时间长」问题