Fetch 处理流式数据-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用中，处理流式数据变得越来越重要。无论是从服务器获取大量文件还是处理实时数据，流式数据的处理都是一个关键技能。fetch() API 提供了强大的工具来处理这种类型的数据，使得开发者能够更高效地管理网络请求和响应。

什么是流式数据？

流式数据是指数据被分批发送或接收的过程。与传统的请求/响应模型不同，在流式数据传输中，数据可以被连续不断地发送或接收，而不需要等待整个数据集加载完成。这种模式特别适用于需要即时反馈的应用场景，如视频流、音频流以及实时日志分析等。

使用 Fetch API 处理流式数据

创建可读流

要使用 fetch() 处理流式数据，首先需要创建一个可读流（ReadableStream）。这可以通过将 Response.body 转换为可读流来实现：

const response = await fetch('https://example.com/large-file');
const reader = response.body.getReader();

读取流数据

一旦有了可读流，就可以通过其 read() 方法来读取数据。这个方法会返回一个包含当前数据块的对象。如果数据尚未准备好，则会返回一个 done 属性为 false 的对象；当所有数据都已读取完毕时，done 将变为 true。

let streamResult;
while (!(streamResult = await reader.read()).done) {
    console.log(streamResult.value);
}

处理流数据

在实际应用中，你可能希望对流中的数据进行某种形式的处理，例如解码文本或转换二进制数据。这可以通过对每次读取到的数据块进行操作来实现。

解码文本数据

如果你正在处理的是文本数据，那么你需要将其从二进制格式解码为字符串。这可以通过 TextDecoder 来实现：

const decoder = new TextDecoder("utf-8");
let decoderResult;
while (!(decoderResult = await reader.read()).done) {
    const chunkAsString = decoder.decode(decoderResult.value, { stream: true });
    console.log(chunkAsString);
}

处理二进制数据

对于二进制数据，你可以根据需要对其进行各种处理，例如存储到文件系统或显示在页面上。以下是一个简单的例子，展示如何将接收到的二进制数据写入文件：

const fs = require('fs');
const writableStream = fs.createWriteStream('/path/to/file');

reader.read().then(function processText(result) {
    if (result.done) return;
    writableStream.write(result.value);
    return reader.read().then(processText);
});

关闭流

一旦所有的数据都被成功读取并处理完毕，记得关闭流。这通常意味着释放任何相关的资源，并确保没有未处理的数据残留。

reader.cancel();
writableStream.end();

实际应用示例

假设我们正在构建一个应用，用户可以从服务器下载一个大文件。我们可以使用上述方法来实现这一功能，确保即使文件非常大，也能保持良好的用户体验。

// javascriptcn.com 代码示例
async function downloadFile(url) {
    const response = await fetch(url);
    const reader = response.body.getReader();
    
    const writableStream = new WritableStream({
        write(chunk) {
            // 在这里处理每个数据块
        },
        close() {
            console.log('Download complete!');
        },
        abort(reason) {
            console.log('Download aborted due to', reason);
        }
    });

    const stream = reader.readable.pipeTo(writableStream);

    try {
        await stream;
    } catch (error) {
        console.error('Error during file download:', error);
    }
}

downloadFile('https://example.com/large-file.zip');

通过这种方式，我们可以有效地管理和处理流式数据，从而提高应用的性能和响应速度。这对于处理大数据集或需要实时反馈的应用尤其重要。