什么是 RESTful API
RESTful API 是基于 HTTP 协议，使用 URL 和 HTTP 方法来访问和操作资源的一种 Web 服务架构风格。RESTful API 以资源为中心，每个资源都有一个唯一的 URL 作为其标识符，支持 GET、POST、PUT、DELETE 等 HTTP 方法来进行 CRUD 操作。
如何使用 RESTful API 交互
React 和 React Native 都是基于 JavaScript 的框架，因此可以使用 AJAX 或者 Fetch API 来发起 HTTP 请求，与 RESTful API 进行交互。
使用 AJAX 请求
------ - ---- ---------
--------
---- ----------------
----- ------
--------- -------
-------- -------------- -
------------------
--
------ ------------- ------- ------ -
--------------------- ------------------
-
---上面的代码使用 jQuery 中的 $.ajax() 方法发起了一个 GET 请求，请求 URL 为 /api/resource，并且指定了返回数据类型为 JSON。请求成功后，将返回的数据打印到控制台中。
使用 Fetch API 请求
----------------------
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------上面的代码使用 Fetch API 发起了一个 GET 请求，请求 URL 为 /api/resource，并且使用 response.json() 方法将响应数据转换为 JSON 格式。请求成功后，将返回的数据打印到控制台中。
使用 axios 请求
------ ----- ---- --------
--------------------------
-------------- -- ---------------------------
------------ -- ----------------------上面的代码使用 axios 发起了一个 GET 请求，请求 URL 为 /api/resource，并且使用 response.data 属性获取响应数据。请求成功后，将返回的数据打印到控制台中。
示例代码
下面是一个使用 React 和 RESTful API 进行交互的示例代码，该示例代码使用了 Fetch API 发起 HTTP 请求，获取 Github 上的用户信息，并且渲染到页面上。
------ ------ - --------- --------- - ---- --------
-------- ----- -
----- ------ -------- - ---------------
------------ -- -
----------------------------------------------
-------------- -- ----------------
---------- -- --------------
------------ -- ----------------------
-- ----
------ -
-----
----- -- -
-----
---- --------------------- --------------- --
--------------------
-----------------
------
--
------
--
-
------ ------- ----上面的代码中，使用了 React 中的 useState() 和 useEffect() Hook 来管理组件状态和副作用。在 useEffect() 中使用 Fetch API 发起了一个 GET 请求，请求 Github 上的用户信息，并且在请求成功后使用 setUser() 方法更新组件状态。最后，根据用户是否存在来渲染页面上的内容。
总结
使用 React 和 React Native 与 RESTful API 进行交互，可以使用 AJAX、Fetch API 或者第三方库 axios 发起 HTTP 请求。需要注意的是，发起请求时需要指定请求的 URL、HTTP 方法、请求参数、请求头等信息，并且需要处理请求成功和失败后的响应数据。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65c34f4badd4f0e0ffd8d06b