快速开始 Getting Started

概述

h3（HTTP 的缩写，发音为 /eɪtʃθriː/，类似 h-3）是一个轻量级且 可组合 的 JavaScript 服务器框架，旨在通过 适配器 与各种 JavaScript 运行时配合使用。

快速入门

创建一个新文件 app.ts（或 app.js）：

// 导入 h3 作为 npm 依赖项
import { createApp, createRouter, defineEventHandler } from 'h3'

// 创建应用程序实例
export const app = createApp()

// 创建新路由器并在应用程序中注册
const router = createRouter()
app.use(router)

// 向 / 路径添加与 GET 请求匹配的新路由
router.get(
  '/',
  defineEventHandler((event) => {
    return { message: '⚡️ Tadaa!' }
  }),
)

现在使用 unjs/listhen 运行开发服务器：

npx --yes listhen -w --open ./app.ts

好了！我们有一个在本地运行的 Web 服务器。

发生了什么？

好的，现在让我们分解一下我们的 hello world 示例：

我们首先使用 createApp() 创建了一个 app 实例。app 是一个小型服务器，能够匹配请求、生成响应和处理生命周期钩子（例如错误）：

export const app = createApp()

然后我们使用 unjs/radix3 创建一个可以匹配路由模式和 http 方法的 路由器实例，并将其注册为应用程序的主处理程序：

const router = createRouter()

app.use(router)

现在是时候添加我们的第一个端点了。在 h3 中，可以使用 defineEventHandler 或 eventHandler 助手（它们是别名）定义请求处理程序。使用包装器，h3 可以通过更好的类型提示和未来兼容性增强您的代码。

defineEventHandler((event) => {})

h3 的妙处在于，您要做的就是简单地返回响应！响应可以是简单的字符串、JSON 对象、数据缓冲区、流或标准 Web 响应。

return { message: '⚡️ Tadaa!' }

最后，我们使用 unjs/listhen CLI 使用 npx 自动安装它。 Listhen 将自动设置并启动我们的网络服务器，无需任何配置，并为您的体验添加即时的 TypeScript 支持！

安装 h3

您可以将 h3 作为 npm 包或从 CDN 导入。

作为 npm 包安装

您可以将此方法用于 Node.js 和 Bun。

npm i h3

从 CDN 导入

您可以直接从 CDN 导入 h3。此方法可用于 Bun、Deno 和其他运行时，例如 Cloudflare Workers（您需要一个适配器）。

import { createApp, toWebHandler } from 'https://esm.sh/h3'

export const app = createApp()

export const handler = toWebHandler(app)