Web 开发人员的 AI：通过 HTTP 流实现更快的响应

值得赞扬的是，Qwik 团队确实提供了一种记录良好的流式响应方法。但是，它涉及到它们的 server$ 函数和 异步生成器函数。如果我们严格讨论 Qwik，这可能是正确的方法，但本系列适合所有人。我将避免这种实现，因为它对于 Qwik 来说过于具体，而是专注于广泛适用的概念。

重构服务器逻辑

我们不能使用路线操作，这很糟糕，因为它们很棒。那么我们可以使用什么呢？

Qwik City 提供多种选择。我发现最好的是中间件。它们提供了对原始工具的足够访问权限，使我们能够完成所需的任务，并且这些概念将适用于 Qwik 之外的其他环境。

中间件本质上是一组函数，我们可以在路由处理程序的请求生命周期内的各个点注入它们。我们可以通过导出我们想要定位的钩子的命名常量来定义它们（onRequest、onGet、onPost、onPut，onDelete）。

因此，我们可以使用一个中间件，通过导出 onPost 中间件来挂钩任何 POST 请求，而不是依赖路由操作。为了支持流式传输，我们需要返回一个标准的 响应对象。我们可以通过创建一个 Response 对象并将其传递给 requestEvent.send() 方法。

这是一个基本（非流式传输）示例：

/** @type {import('@builder.io/qwik-city').RequestHandler} */
导出 const onPost = (requestEvent) => {
  requestEvent.send(new Response('你好松鼠！'))
}

在我们处理流媒体之前，让我们从使用中间件实现的旧路由操作中获得相同的功能。我们可以将大部分代码复制到 onPost 中间件中，但我们无法访问 formData。

幸运的是，我们可以从 requestEvent 重新创建该数据.parseBody() 方法。我们还希望使用 requestEvent.send() 来响应 OpenAI 数据，而不是 return 语句。

/** @type {import('@builder.io/qwik-city').RequestHandler} */
导出 const onPost = async (requestEvent) => {
  const OPENAI_API_KEY = requestEvent.env.get('OPENAI_API_KEY')
  const formData = 等待 requestEvent.parseBody()

  常量提示 = formData.prompt
  常量主体 = {
    型号：'gpt-3.5-turbo'，
    消息：[{角色：'用户'，内容：提示}]
  }

  const 响应 = 等待 fetch('https://api.openai.com/v1/chat/completions', {
    // ... 获取选项
  })
  const data = 等待response.json()

  const responseBody = data.choices[0].message.content

  requestEvent.send（新响应（responseBody））
}

重构客户端逻辑

替换路由操作会产生不幸的副作用，这意味着我们也无法再使用