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 的使用变得非常流畅,感觉熟悉且友好。