首页 > 人工智能 >AI应用消费流式输出

AI应用消费流式输出

来源：互联网 2026-07-31 16:26:13

Fetch结合ReadableStream是浏览器消费流式数据的原生方案，支持POST请求与自定义头，可处理文本、JSON片段等任意格式。通过异步生成器函数调用getReader逐块读取，TextDecoder解码并处理跨块字符边界，配合AbortController实现请求取消。

浏览器端消费流式数据的原生方案：Fetch + ReadableStream

在浏览器端处理流式数据时，Fetch + ReadableStream 是最原生且高效的方案。该方案不依赖任何第三方库，直接调用浏览器内置的 Streams API，具备极高的灵活性。

核心优势

支持 POST 请求，并可自由设置自定义请求头，这在对接后端 API 时尤为关键
对返回数据格式无限制，无论是纯文本、JSON 片段还是其他二进制流，均可正常处理

通用流式请求方法实现

以下代码封装了一个通用流式请求方法，以异步生成器函数形式提供，可直接集成到项目中：

长期稳定更新的攒劲资源： >>>点此立即查看<<<

/**
 * 通用流式请求方法 —— 返回一个异步可迭代对象
 * @param {string} url 请求地址
 * @param {RequestInit} [options] fetch 的配置项（method、headers、body、signal 等）
 * @returns {AsyncGenerator} 异步生成器，每次 yield 一个解码后的文本块
 */
async function* createStreamIterator(url, options = {}) {
  // 1. 发起 fetch 请求
  const response = await fetch(url, options);  // 2. 检查响应状态（可选但建议）
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }  // 3. 获取 reader 和 decoder
  const reader = response.body.getReader();
  const decoder = new TextDecoder('utf-8', { stream: true });  // 4. 逐块读取并 yield 解码后的文本
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    yield decoder.decode(value, { stream: true });
  }
}// 外部调用
// 结合取消（使用 AbortController）
const controller = new AbortController();
const iterator = createStreamIterator('/api/stream', { signal: controller.signal });// 在需要时取消请求
// controller.abort();for await (const chunk of iterator) {
  // 处理 chunk
}