React Native 提供了一个名为 Fetch API 的网络请求服务，可用于获取和发送数据。Fetch API 具有良好的浏览器兼容性，并且是一种功能强大的基于 Promise 的 API，使得在 React Native 中进行数据交换变得非常容易。
在本文中，我们将详细介绍如何使用 Fetch API 来进行网络请求以及如何处理响应数据。我们还将探讨一些最佳实践和常见问题，以便您可以快速开始使用这个强大的工具。
发送 GET 请求
要发送 GET 请求，我们可以使用 fetch() 函数。它有一个必需的参数：请求的 URL。在下面的示例中，我们将从 GitHub API 获取最受欢迎的 JavaScript 存储库。
fetch('https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));在上面的代码中，我们向 fetch() 函数传递了请求 URL，它返回一个 Promise，用于处理从服务器返回的响应。我们可以在 then() 方法中使用 response.json() 方法将响应体转换成 JSON，然后再使用 then() 方法处理实际数据。
发送 POST 请求
如果需要发送 POST 请求，fetch() 函数有两个参数。第一个参数始终是 URL，但是需要传递第二个参数，例如参数对象或设置请求头。
发送 JSON 数据
在下面的示例中，我们将发送一个包含 JSON 数据的 POST 请求，并将其转换为字符串。
-- -------------------- ---- -------
----- ---- - - --------- -------- --------- -------- --
-------------------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- --------------------
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------在上面的代码中，我们将 method 参数设置为 POST，然后在 headers 参数中添加 Content-Type 为 application/json。最后，我们将数据 body 属性设置为 stringified JSON。
发送表单数据
如果需要发送表单数据，我们也可以使用 fetch() 函数。在下面的示例中，我们将使用 FormData 类来生成表单数据。
-- -------------------- ---- ------- ----- -------- - --- ----------- --------------------------- --------- --------------------------- ---------- -------------------------------------- - ------- ------- ----- -------- -- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
注意，在上述代码中，我们省略了 headers 参数，这是因为 fetch() 函数将自动设置正确的 Content-Type。
错误处理
如果服务器返回了错误响应，我们需要处理错误以及其他可能的问题。在下面的示例中，我们将演示如何处理错误响应。
-- -------------------- ---- -------
-----------------------------------------------------------------------------------------------
-------------- -- -
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ ----------------
--
---------- -- ------------------
------------ -- ----------------------- --------在上面的代码中，我们使用 !response.ok 来检查响应是否成功。如果失败，则抛出一个新的错误。然后，catch() 方法将捕获该错误并打印出相关的错误信息。
最佳实践
以下是一些使用 Fetch API 的最佳实践。
处理响应
如果不仅需要检查 HTTP 状态码是否成功，还需要处理其他情况，例如错误响应、重定向或其他状态，请使用以下属性来处理响应：
- status：请求的 HTTP 状态代码。
- ok：返回一个布尔值，表示是否成功。
- statusText：描述 HTTP 状态代码的文本描述。
- headers：返回一个包含响应头的 Headers 对象。可以使用相关的方法来检查头字段的值，例如：headers.get('Content-Type')。
指定请求头
当需要指定请求头时，可以使用 headers 选项来传递。例如，可以使用以下方法指定 accept-language 头。
fetch('https://example.com/api/users', {
headers: {
'Accept-Language': 'en-US,en;q=0.9,ja;q=0.8'
}
})
.then(response => console.log(response));解析 JSON 响应
在处理返回的 JSON 数据时，请记得使用 .json() 方法将 response 对象转换为 JSON 对象。例如：
fetch('https://api.github.com/users/yuyue')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));错误处理
错误处理是一个重要的问题，特别是在网络请求中。使用 catch() 来捕获请求错误并处理异常。
-- -------------------- ---- -------
--------------------------------------
-------------- -- -
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ ----------------
--
---------- -- ------------------
------------ -- --------------------- --------结论
在 React Native 中使用 Fetch API 是进行数据交换的好方法。它简单易用，具有良好的兼容性和强大的功能。但是，处理错误和其他各种情况需要进行适当的逻辑处理和错误处理。
如果您想了解更多关于 Fetch API 的信息，请查阅官方文档。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671505b9ad1e889fe216a6fc