🔥 尤雨溪亲自推荐！全栈利器 H3 框架来了！

images

前端圈的朋友一定都知道，Vue 之父尤雨溪（尤大）亲自推荐的技术，往往都很值得一试。今天要介绍的是一个 轻量、标准、跨平台的全栈 HTTP 框架：H3。它是 Nuxt 核心团队打造，灵感源自 Web 标准和现代后端理念。

无论你是前端、Node 全栈开发者，还是希望构建一个现代边缘服务应用，H3 都是一个不可忽视的框架！

🚀 什么是 H3？

H3 是一个现代、高效、轻量的 HTTP 框架，具有以下特点：

✅ 支持 Node.js、Bun、Deno、Cloudflare Workers 等多运行时
✅ 遵循原生 fetch 请求模型
✅ 极致精简（Tree-shakable）
✅ 简洁易用的 API 设计
✅ 内建中间件机制、插件机制
✅ 可作为后端，也可用于前端请求（替代 axios）

📦 安装方式：

npm i h3@beta

💡 快速上手

用最少的代码启动一个服务：

import { H3, serve } from "h3";

const app = new H3().get("/", () => "Hello from H3!");
serve(app, { port: 3000 });

访问 http://localhost:3000，你将看到 "Hello from H3!"。

是不是非常熟悉的写法？与 Express 相比，H3 采用模块化、函数式的 API 设计，上手门槛极低。

🧩 路由与事件处理

定义 RESTful 路由非常简单：

app.get("/user/:id", (event) => {
  const id = event.params.id;
  return { userId: id };
});

支持多方法路由绑定：

app
  .get("/hello", () => "GET Hello")
  .post("/hello", () => "POST Hello")
  .any("/hello", () => "Any method Hello");

或者通过 defineHandler 提供更结构化的写法：

import { defineHandler } from "h3";

const handler = defineHandler((event) => "Response");
app.get("/", handler);

🔁 生命周期钩子

H3 支持完整的请求生命周期钩子：

const app = new H3({
  onRequest: (event) => {
    console.log("Request:", event.req.url);
  },
  onResponse: (res, event) => {
    console.log("Response:", res.status);
  },
  onError: (error, event) => {
    console.error("Error:", error);
  },
});

你可以轻松实现请求追踪、响应拦截、错误捕捉等功能。

🛡️ 中间件机制

H3 中间件非常灵活，支持同步或异步控制：

// 日志中间件（不会中断流程）
app.use((event) => {
  console.log("Request URL:", event.req.url);
});

// 拦截并处理响应
app.use(async (event, next) => {
  const result = await next();
  return {
    data: result,
    timestamp: Date.now(),
  };
});

🔌 插件系统

你可以封装功能为插件，按需注册：

import { definePlugin } from "h3";

const logger = definePlugin((app, _options) => {
  app.use((req) => {
    console.log(`[${req.method}] ${req.url}`);
  });
});

// 注册插件
app.register(logger());

插件可以像中间件一样复用和共享，也可以根据配置条件化加载，高度可扩展。

🌍 跨平台客户端支持

H3 兼容 Web 环境，app.fetch() 能像 fetch 一样使用！

const response = await app.fetch("/");
const text = await response.text();
console.log(text);

你甚至可以把 H3 实例当作请求客户端，在全栈项目中代替 axios！

🎯 H3 使用场景

场景	优势
前端开发 Mock Server	零依赖、快速启动
Nuxt 全栈开发 API 支持	与 Nitro / Nuxt 完美融合
Serverless / Edge Functions	小巧体积、快速冷启动、标准兼容
替代 Express/Koa 项目	更现代、更轻量、更易拓展