React Native 是一款流行的跨平台应用开发框架，它可以让开发者使用 JavaScript 和 React 构建出高性能、原生用户体验的移动应用程序。在开发 React Native 应用的过程中，一个常见的需求是调用 RESTful API 来获取、提交或更新数据。本篇文章将介绍如何使用 React Native 调用 RESTful API。
步骤一：安装依赖
为了调用 RESTful API，我们需要使用一个 HTTP 客户端库。在 React Native 中，可以使用 axios 库来发送 HTTP 请求。首先，需要安装 axios 库。我们可以使用 npm 进行安装：
--- ------- -----
步骤二：构建 API 请求
在使用 axios 发送 HTTP 请求之前，需要构建 API 请求。首先，需要定义请求的 URL，请求方法以及请求的数据格式。对于 RESTful API，通常采用 GET、POST、PUT 或者 DELETE 请求方法，对应查询、创建、更新或者删除操作。
以获取用户列表为例，我们可以构建如下的请求：
----- ------ - -------------------------------- ------------------
在这个例子中，我们使用了 GET 请求方法，请求了 https://example.com/api/users 的 API 地址。
步骤三：处理 API 响应
在发送 API 请求后，需要处理 API 响应数据。在 axios 中，API 响应数据是一个 Promise 对象，我们可以使用 then() 方法或者 async/await 关键字来处理。
如果使用 then() 方法，我们可以在返回的 Promise 中处理 API 响应数据：
-----------------
---------------- -- -
---------------------------
--
-------------- -- -
---------------------
---在这个例子中，当 API 请求成功返回数据时，会在控制台中打印响应数据。如果发生错误，则会在控制台中打印错误信息。
我们也可以使用 async/await 关键字来处理 API 响应数据。首先，需要将 axios 的返回值设置为 async，然后使用 await 关键字等待 API 请求返回数据：
----- -------- ---------- -
--- -
----- -------- - ----- ------------------
---------------------------
- ----- ------- -
---------------------
-
-
-----------在这个例子中，我们定义了 getUsers() 函数来获取用户列表。当 API 请求成功返回数据时，会在控制台中打印响应数据。如果发生错误，则会在控制台中打印错误信息。
示例代码
下面是一个完整的示例代码，它演示了如何使用 axios 发送 API 请求并处理 API 响应数据：
------ ------ - --------- --------- - ---- --------
------ - ----- ----- -------- - ---- ---------------
------ ----- ---- --------
----- ------ - --------------------------------
-------- ----- -
----- ------- --------- - -------------
------------ -- -
----- -------- ---------- -
--- -
----- -------- - ----- ------------------
------------------------
- ----- ------- -
---------------------
-
-
-----------
-- ----
------ -
------
---------- -----------
---------
------------
-------------------- -- --------
-------------- ---- -- -- -
------
----------------------
------------------------
-------
--
--
-------
--
-
------ ------- ----在这个示例代码中，我们使用了 useState 和 useEffect 钩子来获取用户列表。在组件渲染完成后，会自动执行 getUsers() 函数，获取用户列表并更新组件状态。用户列表通过 FlatList 组件进行渲染。
总结
在 React Native 应用中，使用 axios 库可以轻松地调用 RESTful API。通过构建 API 请求、处理 API 响应数据，可以快速地获取、提交或更新数据，从而构建出功能强大的移动应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653e0e8f7d4982a6eb7a36ba