首页教程软件教程正文

使用Bun快速搭建HTTP服务器的详细教程

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 487 浏览 3013 个字

摘要 :

文章目录一、创建新项目二、编写HTTP服务器代码三、运行服务器四、添加路由功能（一）扩展路由示例五、处理POST请求（一）POST请求示例扩展六、使用figlet……

文
章
目
录

一、创建新项目
二、编写HTTP服务器代码
三、运行服务器
四、添加路由功能

（一）扩展路由示例

五、处理POST请求

（一）POST请求示例扩展

六、使用figlet包添加ASCII艺术
七、Bun的性能优势

（一）性能对比示例

Bun作为一款快速且功能全面的JavaScript运行环境，它提供了简单易用的API，能帮助我们轻松搭建HTTP服务器。接下来，就为大家详细介绍如何使用Bun.serve API来搭建一个基础的HTTP服务器，并通过具体实例展示其丰富功能。

一、创建新项目

搭建服务器的第一步，是创建一个新的项目目录并初始化Bun项目。在终端中执行以下命令：

mkdir quickstart
cd quickstart
bun init

执行bun init命令后，会有一系列提示。按照提示输入项目名称，接着可以选择入口文件名（默认是index.ts）。如果没有特殊需求，直接按Enter键接受所有默认设置就行。这样，一个新的Bun项目就初始化完成了。

二、编写HTTP服务器代码

项目创建好后，打开生成的index.ts文件，把下面这段代码粘贴进去：

const server = Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response(\"Bun!\");
  },
});

console.log(`Listening on http://127.0.0.1:${server.port} ...`);

这段代码的作用是使用Bun.serve启动一个HTTP服务器。其中，port: 3000表示服务器监听的端口是3000；fetch函数则定义了服务器对请求的处理方式，这里是对所有请求都返回字符串“Bun!” 。最后，通过console.log打印出服务器的监听地址。

三、运行服务器

代码编写完成后，在终端运行以下命令启动服务器：

bun index.ts

服务器启动后，在浏览器地址栏输入http://127.0.0.1:3000，就能看到页面上显示“Bun!”，这说明服务器已经成功运行并能正常响应请求了。

四、添加路由功能

Bun.serve还支持路由功能，借助这个功能，我们可以根据不同的URL路径返回不同的内容。看下面这个示例代码：

const server = Bun.serve({
  port: 3000,
  routes: {
    \"/\": () => new Response(\"Home page!\"),
    \"/blog\": () => new Response(\"Blog page!\"),
  },
  fetch(req) {
    return new Response(\"404 Not Found\", { status: 404 });
  },
});

在这个示例里，当访问/路径时，服务器会返回“Home page!”；访问/blog路径，返回“Blog page!” 。如果访问其他路径，服务器就会返回404错误页面，提示“404 Not Found”。

（一）扩展路由示例

要是想添加更多路由，按照下面这种方式修改代码就可以：

const server = Bun.serve({
  port: 3000,
  routes: {
    \"/\": () => new Response(\"Home page!\"),
    \"/blog\": () => new Response(\"Blog page!\"),
    \"/about\": () => new Response(\"About page!\"),
  },
  fetch(req) {
    return new Response(\"404 Not Found\", { status: 404 });
  },
});

这样，访问/about路径时，就能看到“About page!”的内容了。

五、处理POST请求

Bun.serve对POST请求的处理也很方便。下面是一个处理JSON数据的示例：

const server = Bun.serve({
  port: 3000,
  routes: {
    \"/api/posts\": {
      POST: async req => {
        const data = await req.json();
        return new Response(JSON.stringify(data), {
          headers: {
            \"Content-Type\": \"application/json\",
          },
        });
      },
    },
  },
});

在这个例子中，当有POST请求发送到/api/posts路径时，服务器会读取请求体中的JSON数据，然后再把这些数据返回给客户端，同时设置响应头的Content-Type为application/json ，表明返回的数据是JSON格式。

（一）POST请求示例扩展

如果要处理不同类型的POST请求，可以参考下面的代码：

const server = Bun.serve({
  port: 3000,
  routes: {
    \"/api/posts\": {
      POST: async req => {
        const data = await req.json();
        return new Response(JSON.stringify(data), {
          headers: {
            \"Content-Type\": \"application/json\",
          },
        });
      },
    },
    \"/api/files\": {
      POST: async req => {
        const formData = await req.formData();
        return new Response(\"File uploaded successfully!\", {
          headers: {
            \"Content-Type\": \"text/plain\",
          },
        });
      },
    },
  },
});

这段代码中，/api/posts路径还是处理JSON数据的POST请求，而/api/files路径则用来处理表单数据的POST请求，当收到表单数据的POST请求时，会返回“File uploaded successfully!” 。

六、使用figlet包添加ASCII艺术

为了让服务器的输出更有趣，我们可以借助figlet包把普通字符串转化为ASCII艺术形式。首先要安装figlet包，在终端执行以下命令：

bun add figlet
bun add -d @types/figlet # 如果使用TypeScript

安装完成后，更新index.ts文件：

import figlet from \"figlet\";

const server = Bun.serve({
  port: 3000,
  fetch(req) {
    const asciiArt = figlet.textSync(\"Bun!\");
    return new Response(asciiArt);
  },
});

重新启动服务器，刷新页面，就能看到ASCII艺术形式的“Bun!”横幅了。