前端流式(stream)请求，获取持续响应的方式

在前端开发中，流式请求是一个非常有用的功能，尤其是在处理持续响应时。流式请求允许我们在不等待整个响应完成的情况下，逐步处理数据。这种方法在获取实时数据、长时间运行的操作或者在处理大文件时尤为有效。本文将介绍如何在前端使用流式请求获取持续响应，并给出相应的代码示例。

什么是流式请求？

流式请求是一种协议下的请求，它允许服务器在响应过程中逐步发送数据，而不必等待所有数据的生成完成。这种技术通常用于处理大量数据或希望实时更新的应用场景，比如聊天应用、实时数据监测等。

使用 Fetch API 实现流式请求

现代浏览器支持 Fetch API，它可以用来实现流式请求。通过使用 ReadableStream，我们能够逐步读取响应数据。下面是一个简单的示例，演示如何使用 Fetch API 从服务器获取持续响应。

服务器端示例

假设我们使用 Node.js 创建一个简单的服务器，持续向客户端发送数据：

const express = require('express');
const app = express();
const port = 3000;

app.get('/stream', (req, res) => {
  res.setHeader('Content-Type', 'text/plain');

  let count = 0;
  const intervalId = setInterval(() => {
    count++;
    res.write(`Message ${count}\n`);

    // 在发送了10条消息后关闭连接
    if (count >= 10) {
      clearInterval(intervalId);
      res.end();
    }
  }, 1000); // 每隔1秒发送一条消息
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

上面的代码创建了一个简单的Express服务器，每隔1秒向客户端发送一条消息，共发送10条消息后关闭连接。

客户端示例

下面是如何在客户端使用 Fetch API 来处理流式请求：

async function fetchStream() {
  const response = await fetch('http://localhost:3000/stream');

  // 检查响应是否正常
  if (!response.ok) {
    console.error('网络响应出现问题');
    return;
  }

  const reader = response.body.getReader();
  const decoder = new TextDecoder("utf-8");

  // 读取流
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      console.log('数据流结束！');
      break;
    }

    // 解析数据并输出
    const chunk = decoder.decode(value, { stream: true });
    console.log(`接收到数据: ${chunk}`);
  }
}

// 调用函数以开始请求
fetchStream();

代码解析

1. 服务器端：我们使用Express框架创建一个简单的服务器，定义了一个 /stream 路由，在这个路由里面，每隔1秒发送一条消息，直到发送了10条后结束响应。

2. 客户端：在客户端，我们使用 fetch 发送请求并获取响应。通过 response.body.getReader() 获取可读流的读取器，接着通过循环读取流中的数据。每次读取的数据会被解码，并打印到控制台上。

总结

流式请求为前端开发提供了一种高效处理实时数据的方式。在实际应用中，开发者可以根据需要调整数据的生成频率和处理逻辑。希望通过本篇文章，大家能够对流式请求有一个基本的了解，并尝试在自己的项目中实施这种技术。