AI应用-消费流式输出

朦胧之2026-07-20 22:40

Fetch + ReadableStream

支持 POST 请求和自定义请求头
能处理任意格式的流式数据

js 复制代码

/**
 * 通用流式请求方法 ------ 返回一个异步可迭代对象
 * @param {string} url 请求地址
 * @param {RequestInit} [options] fetch 的配置项（method、headers、body、signal 等）
 * @returns {AsyncGenerator<string, void, unknown>} 异步生成器，每次 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
}