详情

首页手游攻略 AI应用:消费流式输出

AI应用:消费流式输出

佚名 2026-07-21 18:14:54

Fetch + ReadableStream

  • 支持 POST 请求和自定义请求头
  • 能处理任意格式的流式数据
 复制代码/**
 * 通用流式请求方法 —— 返回一个异步可迭代对象
 * @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
}
相关资讯
点击查看更多
游戏推荐
推荐专题
热门阅读
推荐下载