🚀🚀🚀尤雨溪推荐的这个库你一定要知道！轻量⚡️，优雅！

前言

前几天刷推特，发现尤雨溪转发了一个推特，是 H3 ( Http 简写)，空闲之余，自己根据文档写了一会，没想到这么好用～

往期精彩推荐

🚀🚀🚀什么？浏览器也能修改项目源文件了？Chrome 团队开源的超强 Vite 插件！🚀🚀🚀
⚓️ Oxlint 1.0 版本发布，比 ESLint 快50 到 100 倍！🚀🚀🚀
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
更多精彩文章欢迎关注我的公众号：萌萌哒草头将军

正文

H3 是一个轻量级的 HTTP 服务器框架，支持多种 JavaScript 运行时，

它的核心理念是基于 Web 标准，提供简洁的 API 和高度可组合的工具集！

而且支持 中间件 和 插件系统

相比传统的 Express 或 Koa，H3 的核心体积更小，采用 tree-shakable 设计，只打包你实际用到的代码，特别适合小而美的开发服务！

快速上手

H3 的入门非常简单!

以下是一个最简单的示例：

javascript 复制代码

import { H3, serve } from "h3";

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

现在你访问 http://localhost:3000，就可以得到 "mmdctjj!" 字符串！

下载：

css 复制代码

npm i h3@beta

核心特性

路由与事件处理

前面说过，它的核心理念是基于 Web 标准，路由和事件处理也是基于 fetch 标准！

你可以通过下面的方法注册一个路由并为其绑定事件处理方法！

javascript 复制代码

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

而且其路由支持注册多个事件处理方法：

js 复制代码

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

另外，还提供了 defineHandler 定义事件处理方法：

js 复制代码

import { H3, defineHandler } from "h3";
const app = new H3();
const handler = defineHandler((event) => "Response");
app.get("/", handler);

生命周期

以下是从 HTTP 请求到达到生成响应期间 H3 服务器中发生的生命周期。

rust 复制代码

传入请求 -> 接受请求 -> 调度请求 -> 响应请求

传入请求是指浏览器发送请求开始，到服务器接受请求前这段时间

接受请求是指开始接受浏览器请求，并作出处理，首先触发全局钩子onRequest，然后触发事件处理方法 defineHandler

调度请求是指开始匹配路由吗，并调用全局的中间件

响应请求是指开始返回请求的内容，并触发全局的钩子，作为最终响应！

下面是定义全局钩子的方法！

js 复制代码

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

中间件

中间件可以拦截请求、响应和错误！

首先，你需要注册中间件，你可以使用 next 参数来拦截下一个中间件和处理程序的返回值！

js 复制代码

// 不需要拦截值
app.use((event) => {
  console.log(event);
});

// 需要拦截值
app.use(async (event, next) => {
  const rawBody = await next();
  // [intercept response]
  return rawBody;
});

接着，我们可以在后面使用了

js 复制代码

app.use(async (event, next) => {
    const rawBody = await next();
    return rawBody;
  })
  .get("/", "Hello");

插件

使用插件的方法：支持实例化时，使用参数创建，或者使用实例的 register 注册！

js 复制代码

import { H3 } from "h3";
import { logger } from "./logger.mjs";

// Using instance config
const app = new H3({
  plugins: [logger()],
});

// Or register later
app.register(logger());

// ... rest of the code..
app.get("/**", () => "Hello, World!");

支持自定义插件，只需要 definePlugin 方法即可！

js 复制代码

import { definePlugin } from "h3";

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

支持客户端

H3 可以直接用于在任何与 Web 兼容的运行时，甚至 H3 的实例返回了一个 fetch 方法，你可以直接在客户端使用它代替 axios！

js 复制代码

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

最后

H3 的轻量设计让开发者可以轻松应对从原型到生产环境的各种需求。如果你追求极致的性能或需要在边缘计算场景下开发，H3 绝对值得一试！

仓库：github.com/h3js/h3

官网：h3.dev/guide

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！

往期精彩推荐

🚀🚀🚀什么？浏览器也能修改项目源文件了？Chrome 团队开源的超强 Vite 插件！🚀🚀🚀
⚓️ Oxlint 1.0 版本发布，比 ESLint 快50 到 100 倍！🚀🚀🚀
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
更多精彩文章欢迎关注我的公众号：萌萌哒草头将军