Nuxt3中如何在响应API请求后发起非阻塞调用（类似Express res.on('final')）

Nuxt3底层基于h3框架，你可以通过以下几种方式实现响应发送后执行日志/计数逻辑：

1. 在单个API路由中直接监听原生Response事件 #

h3的event对象提供了原生Node.js的req和res引用，你可以监听finish事件（与Express的final事件效果一致）：

// server/api/hello.ts
export default defineEventHandler(async (event) => {
  // 处理响应内容
  const response = { message: 'Hello from Nuxt3' }

  // 监听响应完成事件，此时响应已发送给客户端
  event.node.res.on('finish', async () => {
    // 执行Redis计数递增
    const redis = await useRedis() // 假设已配置Redis客户端（如@nuxt/redis模块）
    await redis.incr('hello:visit_count')
  })

  return response
})

2. 全局中间件统一处理指定路由 #

如果需要给多个路由添加后置逻辑，可以创建全局服务器中间件：

// server/middleware/post-response.ts
export default defineEventHandler(async (event) => {
  // 先让请求正常流转到对应路由处理响应
  await next(event)

  // 响应发送后执行逻辑
  event.node.res.on('finish', async () => {
    // 过滤目标路由
    if (event.path === '/api/hello') {
      const redis = await useRedis()
      await redis.incr('hello:visit_count')
    }
  })
})

3. 通过Nuxt Server Hooks全局监听 #

如果需要对所有请求做后置处理，可以在nuxt.config.ts中使用listen钩子：

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'listen': (server) => {
      server.on('request', (req, res) => {
        res.on('finish', async () => {
          if (req.url === '/api/hello') {
            // 这里注意要正确导入Redis客户端实例
            const redis = await import('./server/utils/redis').then(m => m.default)
            await redis.incr('hello:visit_count')
          }
        })
      })
    }
  }
})

注意事项 #

• finish事件中的异步操作无需等待，因为响应已完成发送，不会阻塞客户端
• 确保Redis客户端是单例模式，避免每次请求创建新连接导致性能问题
• 如果使用第三方Redis模块（如@nuxt/redis），在中间件/hooks中要确保实例已正确初始化

内容的提问来源于stack exchange，提问作者No Name