在现代 Web 应用程序中，经常需要和后端 API 交互。使用 HTTP 请求获取数据是实现这一目标的一种常见方法。TypeScript 是一种强类型的 JavaScript 扩展，为开发人员提供了更好的类型安全和可维护性。在本文中，我们将学习如何使用 TypeScript 优雅地处理 HTTP 请求。
发送 HTTP 请求
要发送 HTTP 请求，我们需要使用 JavaScript 内置的 fetch 函数。然而，fetch 函数返回的是一个 Promise 对象，而我们通常希望它返回一个特定类型的对象。这时，我们可以使用 async/await 关键字来等待 Promise 的完成，并且使用 try/catch 来处理错误。
下面是一个简单的例子，演示如何发送 GET 请求并解析 JSON 响应：
----- -------- ------------ -------- ------------ -
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
-------------------
-
-在上述示例中，我们使用 await fetch(url) 发送 GET 请求，并使用 await response.json() 解析响应。最终，getData 将解析的数据作为返回值返回。
处理请求参数
在某些情况下，我们需要将一些参数传递给请求，例如 POST、PUT 或 DELETE 请求。为此，我们需要使用请求选项对象，它包含 HTTP 方法、头信息、请求体等信息。
下面是一个发送 POST 请求并将数据作为 JSON 格式发送的例子：
----- -------- ------------- ------- ----- ----- ------------ -
--- -
----- -------- - ----- ---------- -
------- -------
-------- -
--------------- ------------------
--
----- --------------------
---
----- ------------ - ----- ----------------
------ -------------
- ----- ------- -
-------------------
-
-在上述示例中，我们使用 fetch(url, options) 的第二个参数来指定请求选项。在这个例子中，我们将请求方法设置为 POST，并将请求正文设置为 JSON 格式的字符串。
封装 HTTP 请求
发送请求和处理选项可能是重复的，而且很难统一。我们可以使用类和方法来封装这些操作，使其更易于使用和维护。这种方法还可以保持代码的可读性和可维护性。
下面是一个简单的类，用于发送 GET 和 POST 请求：
----- ---- -
----- -------- -------- ------------ -
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
-------------------
-
-
----- --------- ------- ----- ----- ------------ -
--- -
----- -------- - ----- ---------- -
------- -------
-------- -
--------------- ------------------
--
----- --------------------
---
----- ------------ - ----- ----------------
------ -------------
- ----- ------- -
-------------------
-
-
-在上述示例中，我们定义了一个 Http 类，该类包含 get 和 post 方法，用于发送 GET 和 POST 请求。使用这种方法，我们可以轻松地封装 HTTP 请求，并在整个应用程序中重复使用。
总结
在本文中，我们学习了如何使用 TypeScript 和 fetch 函数发送 HTTP 请求，如何处理请求选项和请求参数，以及如何封装 HTTP 请求。这些技术为我们提供了一个优雅的方式来处理 Web 应用程序中的 API 请求，使得我们的应用程序更加安全，可维护和易于扩展。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a0ef8d48841e9894d34445