Deno 是一个安全的 JavaScript 和 TypeScript 运行时，它提供了一组内置的标准模块，包括 Fetch API。Fetch API 是一种用于发起 HTTP 请求的新型 API，它提供了强大的功能和灵活的配置选项。本文将介绍如何在 Deno 中使用 Fetch API 来获取和处理 HTTP 请求和响应。
Fetch API 简介
Fetch API 是一种基于 promise 的 API，它提供了一个简单的接口来发起 HTTP 请求和处理响应。它的设计目标是提供更强大、更灵活、更易于使用的 HTTP 请求 API，以取代 XMLHttpRequest（XHR）和 jQuery 的 Ajax 方法。
Fetch API 的基本用法如下所示：
fetch(url, options) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 });
其中，url 是要请求的 URL 地址，options 是一个可选的配置对象，它包含了请求的参数和选项。fetch 方法返回一个 promise，它会异步获取响应。在响应处理函数中，我们可以使用 response 对象来访问响应的状态、头信息和响应体。如果发生错误，则会调用 catch 函数来处理错误。
Fetch API 还提供了一些高级功能，如请求和响应的拦截器、请求和响应的流式处理、跨域请求的支持等。这些功能使得 Fetch API 变得更加强大和灵活。
在 Deno 中使用 Fetch API
在 Deno 中使用 Fetch API 的方法很简单，只需要在脚本中导入 fetch 函数即可：
import { fetch } from "https://deno.land/std@0.110.0/fetch/mod.ts";
这里使用了 Deno 标准模块库中的 fetch 模块，它提供了 Fetch API 的实现。我们可以像使用原生的 Fetch API 一样来发起 HTTP 请求和处理响应。
下面是一个使用 Fetch API 获取 GitHub API 的示例代码：
-- -------------------- ---- ------- ------ - ----- - ---- --------------------------------------------- ----- --- - --------------------------------------- ----- ------- - - -------- - ------------- ------- -- -- ---------- -------- -------------- -- - -- ------------- - ------ ---------------- - ---- - ----- --- -------------- - -- ---------- -- - ------------------ -- ------------ -- - --------------------- ---展开代码
在这个示例中，我们使用了 GitHub API 来获取用户信息。我们设置了一个 User-Agent 头信息，以便 GitHub 了解我们使用的是 Deno。在响应处理函数中，如果响应状态码为 200（即成功），则将响应体解析为 JSON 格式并输出到控制台。如果发生错误，则会将错误信息输出到控制台。
Fetch API 的高级功能
除了基本的 HTTP 请求和响应处理功能，Fetch API 还提供了一些高级功能，如请求和响应的拦截器、请求和响应的流式处理、跨域请求的支持等。这些功能可以帮助我们更好地处理 HTTP 请求和响应。
请求和响应的拦截器
Fetch API 允许我们在请求和响应的过程中添加拦截器，以便在请求和响应的各个阶段执行自定义逻辑。例如，我们可以在发送请求之前添加一个拦截器来添加认证信息，或者在接收响应之后添加一个拦截器来处理响应头信息。
下面是一个使用拦截器的示例代码：
-- -------------------- ---- ------- ------ - ----- - ---- --------------------------------------------- ----- --- - --------------------------------------- ----- ------- - - -------- - ------------- ------- -- -- ----- ------------------ - --------- -------- -- - -------------------- ------------- ------ -------- -- ----- ------------------- - ---------- --------- -- - -------------------- ----------------- ------ --------- -- ---------- -------- -------------- -- - -- ------------- - ------ ---------------- - ---- - ----- --- -------------- - -- ---------- -- - ------------------ -- ------------ -- - --------------------- ---展开代码
在这个示例中，我们定义了一个请求拦截器和一个响应拦截器。请求拦截器会在发送请求之前执行，用于输出请求的 URL 地址。响应拦截器会在接收响应之后执行，用于输出响应的状态码。在 Fetch API 中，我们可以通过 RequestInit 和 Response 对象来访问请求和响应对象，从而实现拦截器的功能。
请求和响应的流式处理
Fetch API 支持请求和响应的流式处理，即将请求和响应的数据流分成多个块，以便逐个处理。这在处理大型数据、文件上传和下载等场景中非常有用。
下面是一个使用流式处理的示例代码：
-- -------------------- ---- ------- ------ - ----- - ---- --------------------------------------------- ----- --- - ---------------------------------------------- ----- ------- - - -------- - ------------- ------- -- -- ---------- -------- -------------- -- - -- ------------- - ----- ------ - -------------------------- ----- ---- - -- -- - --------------------- ----- ----- -- -- - -- ------ - -------------------- ------- - --------------------- ------- ------- --- -- ------- - ---- - ----- --- -------------- - -- ------------ -- - --------------------- ---展开代码
在这个示例中，我们使用了 GitHub 的头像 URL 地址来演示流式处理的功能。我们首先获取响应对象，然后将响应体转换为一个 ReadableStream 对象。我们使用 getReader 方法来获取一个可读的流读取器对象，然后使用递归函数 read 来逐个读取数据块。在读取完毕后，我们输出一条消息表示读取完毕。
跨域请求的支持
Fetch API 支持跨域请求，即在不同的域名和端口之间发送和接收 HTTP 请求和响应。这使得我们可以在不同的服务器之间共享数据和资源，从而实现更灵活的应用程序。
下面是一个使用跨域请求的示例代码：
-- -------------------- ---- ------- ------ - ----- - ---- --------------------------------------------- ----- --- - --------------------------------------- ----- ------- - - -------- - ------------- ------- -- ----- ------- -- ---------- -------- -------------- -- - -- ------------- - ------ ---------------- - ---- - ----- --- -------------- - -- ---------- -- - ------------------ -- ------------ -- - --------------------- ---展开代码
在这个示例中，我们使用了 GitHub API 来获取用户信息。我们设置了一个 User-Agent 头信息，并将 mode 属性设置为 cors，以便允许跨域请求。在响应处理函数中，我们将响应体解析为 JSON 格式并输出到控制台。如果发生错误，则会将错误信息输出到控制台。
结论
本文介绍了如何在 Deno 中使用 Fetch API 来获取和处理 HTTP 请求和响应。我们学习了 Fetch API 的基本用法和高级功能，包括请求和响应的拦截器、请求和响应的流式处理、跨域请求的支持等。这些功能使得 Fetch API 变得更加强大和灵活，可以帮助我们更好地处理 HTTP 请求和响应。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676228a7856ee0c1d4fddccf
