Deno 中的浏览器 API

视频说明 跳转到标题#

Deno 希望为开发者提供尽可能接近浏览器的编程环境。Deno 使用 Web 标准 API，因此如果您熟悉 Web 开发，那么您也熟悉 Deno。如果不是，当您学习如何使用 Deno 时，您也在学习如何进行 Web 开发。

如果您查看文档，它会很好地告诉您有哪些可用功能，所以我们有 Canvas、国际化、消息传递、存储、流、Temporal、WebSockets 等等，所有这些我们喜欢在 Web 上使用的东西，我们都会发现它们内置在 Deno 中。

文本和代码 跳转到标题#

让我们先看看 fetch。它的工作方式可能和您想的一样。

我们将从获取 JSON Placeholder API 中获得一个响应。然后我们将该响应转换为 JSON 作为新变量并 console.log 它。现在，如果我们在终端中查看它，我们会说 deno allow network，这样我们就可以立即选择运行该 fetch。

const response = await fetch("https://snowtooth-hotel-api.fly.dev");
const data = await response.json();
console.log(data);

我们到此为止。所有数据都如我们预期般返回。

deno add jsr:@std/streams

所以让我向您展示我的意思。我们将保留那个 fetch。我们将说，如果响应体值存在，我们将创建一个名为 transformed stream 的新变量，并将其设置为 response.body。谢谢。在这里，我们将使用名为 pipeThrough 的函数。

pipeThrough 是 JavaScript 中的一个方法，它允许我们获取可读流的输出并将其传递以修改流的数据。我们要做的第一件事是将字节流解码为文本流。所以我们会说 new text, decoder stream。然后我们将再链上一个这样的函数 pipeThrough。

所以这次我们将把文本流拆分成行。这样我们的数据就会返回不同的行。现在这个文本行流实际上来自我们需要包含的一个库。

import { TextLineStream } from "@std/streams";
import { toTransformStream } from "@std/streams/to-transform-stream";

const response = await fetch("https://example.com/data.txt");

// Ensure the response body exists
if (response.body) {
  // Create a stream reader that processes the response body line by line
  const transformedStream = response.body
    // Decode the byte stream into a text stream
    .pipeThrough(new TextDecoderStream())
    // Split the text stream into lines
    .pipeThrough(new TextLineStream())
    // Get a reader to read the lines
    //.getReader();
    .pipeThrough(toTransformStream(async function* (src) {
      for await (const chunk of src) {
        if (chunk.trim().length === 0) {
          continue;
        }
        console.log(chunk);
        yield chunk;
      }
    }));
  // Create a reader to consume the transformed stream
  const reader = transformedStream.getReader();
  // Read and log each line of text from the stream
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    console.log(value); // Log each parsed JSON object
  }
}

设置配置 跳转到标题#

所以我们要说 deno add jsr@std/streams。这将在旁边创建我们的 deno.json 配置文件。将有另一个视频更深入地探讨这一点，但目前您只需知道这包括了我们项目中的任何导入。所以转换流正在形成，但还有几个步骤。

使用转换流 跳转到标题#

下一步是再次使用 pipeThrough。这次我们将使用另一个函数来转换流，它将来自标准流，特别是函数 toTransformStream。这次我们将在其中传入一个异步生成器。我们知道它是一个生成器，因为我们使用了星号，并且此函数的主体是一个循环，在这里我们将说 const chunk，也就是我们正在处理的小块数据，来自源的 chunk，它是传入的值。

我们将说 console.log(chunk)，并且我们还将在此处 yield 该 chunk。好的，那么这个 console.log 对我们有什么作用呢？我们继续运行 deno --allow-net main.ts。这向我们展示了这是我们 HTML 文档的第一行。

所以我们实际上需要一种遍历它的方法，我们将通过创建一个读取器来消费这个转换流。所以让我们在这里去掉 console log。在这里我们将创建一个名为 reader 的值，它将设置为 transformedStream.getReader()。现在从这里开始，我们可以创建一个小的 while 循环。所以只要那个值是 true。

我们希望从 await reader.read() 中解构 {value, done}。所以我们可以再次在该读取器上调用 .read() 方法。然后我们将说如果 done 为 true，那么我们想跳出循环。否则，我们想 console.log(value)。

很好。所以现在我们将在控制台中看到我们的 HTML 逐行打印出来。

好的，这就是一个使用我们的文本行流的快速示例。我们可以将其与 fetch 结合使用。如果您想了解更多关于此 API 的信息，您可以在此处查看文档。Deno 为我们提供了一个真正的类似浏览器的环境，用于使用 fetch、Web Workers 等功能，以及更多。

Deno 使这些 Web 标准 API 的使用变得非常流畅，感觉熟悉且友好。