JS流式模式输出函数模式使用详解

一、传统模式：一次性返回完整结果

我们平时写接口大多是这样：

async function getAnswer(question: string): Promise<string> {
  const result = await callAI(question); // 等待完整结果（可能需要几秒）
  return result; // 一次性返回
}
// 控制器中
const answer = await service.getAnswer(question);
ctx.body = { data: answer };

如果开发 ai 相关的项目

问题：用户必须等待 AI 生成完整个回答才能看到内容。如果 AI 生成需要 10 秒，用户就白屏等待 10 秒，体验很差。

二、流式模式：边生成边返回

我们希望 AI 每生成一个字，就立刻推送给用户。但 HTTP 响应只能发送一次，不能先返回一部分再返回另一部分。解决办法是：

• 不关闭连接，保持 HTTP 响应通道开启，持续写入数据块（SSE 或分块传输）。
• 后端需要一种方式，能够“每产生一个 token 就调用一个函数”来写入数据。

这就是 回调函数模式 的应用场景。

三、回调函数模式模拟

想象你有一个函数 generate，它模拟 AI 逐字产生结果：

// 模拟 AI 逐字生成
function simulateAI(word: string, callback: (token: string) => void) {
  for (const ch of word) {
    setTimeout(() => callback(ch), 100); // 每 100ms 输出一个字符
  }
}

如果不用回调，我们可能会写：

function generateSync(word: string): string {
  let result = '';
  for (const ch of word) {
    result += ch;
    // 无法在这里把中间结果返回给调用方，因为函数还没结束
  }
  return result; // 只能最后一次性返回
}

使用回调后，调用方可以这样：

simulateAI('你好', (token) => {
  console.log('收到 token:', token); // 会打印三次：你、好
});

回调函数 (token) => { ... } 就像是“收到数据时的处理指令”。simulateAI 每产生一个字，就执行这个指令，把字传出去。

代码中的实际应用

BusinessChatService.chatStream 中：

async chatStream(input: string, onToken: (token: string) => void) {
  // ... 调用 LM Studio 流式 API
  for await (const chunk of stream) {
    // 解析出 token
    const token = parsed.choices[0]?.delta?.content;
    if (token) {
      onToken(token); // 每得到一个 token，就调用外部传入的回调
    }
  }
}

控制器调用时：

await service.chatStream(input, (token) => {
  res.write(`data: ${JSON.stringify({ token })}\n\n`); // 将 token 写入 HTTP 响应
});

关键点：

• chatStream 不关心 token 最终被写到哪里（可以是 HTTP 响应、WebSocket、文件等），它只负责“产生 token 时调用回调”。
• 控制器负责提供“写入响应”的具体实现（即回调函数）。
• 这样实现了职责分离：服务专注于 AI 交互，控制器专注于网络传输。
• 在传统 CRUD 开发中，我们通常直接 return 数据库查询结果，很少需要“逐行返回”。
• 流式输出是 AI 应用特有的需求，需要改变思维：从“等待完整结果”到“边生成边推送”。
• 回调函数通常用于事件驱动（如 addEventListener），但在这里用于异步迭代器的数据推送。

六、类比帮助你理解

想象你在厨房做菜（AI 生成回答），服务员（控制器）站在门口等。

• 传统模式：你把整盘菜做好后才端出去，顾客饿着肚子等很久。
• 流式模式：你做一道菜（一个字）就让服务员立刻端出去，顾客边吃边等。

服务员怎么知道菜做好了？你每完成一道菜就喊一声“上菜！”（调用回调函数）。服务员听到后就把菜端走（写入 HTTP 响应）。

在你的代码中：

• “你” = chatStream 方法
• “上菜！” = onToken(token)
• “服务员” = 控制器中传入的箭头函数

七、总结

• 回调函数模式 在这里是为了实现流式输出，避免用户等待完整结果。
• chatStream 不返回结果，而是通过反复调用 onToken 来“推送”数据块。
• 控制器负责提供“如何推送”的具体逻辑（写入 HTTP 响应）。
• 这种模式对于 AI 对话、实时数据处理非常实用。

到此这篇关于JS流式模式输出函数模式使用详解的文章就介绍到这了,更多相关js流式模式输出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论