React 和 React Native 如何使用 RESTful API 交互

阅读时长 4 分钟读完

什么是 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

纠错
反馈