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

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

import $ from 'jquery';

$.ajax({
    url: '/api/resource',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error(status, error.toString());
    }
});

上面的代码使用 jQuery 中的 $.ajax() 方法发起了一个 GET 请求，请求 URL 为 /api/resource，并且指定了返回数据类型为 JSON。请求成功后，将返回的数据打印到控制台中。

使用 Fetch API 请求

fetch('/api/resource')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

上面的代码使用 Fetch API 发起了一个 GET 请求，请求 URL 为 /api/resource，并且使用 response.json() 方法将响应数据转换为 JSON 格式。请求成功后，将返回的数据打印到控制台中。

使用 axios 请求

import axios from 'axios';

axios.get('/api/resource')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

上面的代码使用 axios 发起了一个 GET 请求，请求 URL 为 /api/resource，并且使用 response.data 属性获取响应数据。请求成功后，将返回的数据打印到控制台中。

示例代码

下面是一个使用 React 和 RESTful API 进行交互的示例代码，该示例代码使用了 Fetch API 发起 HTTP 请求，获取 Github 上的用户信息，并且渲染到页面上。

import React, { useState, useEffect } from 'react';

function App() {
    const [user, setUser] = useState(null);

    useEffect(() => {
        fetch('https://api.github.com/users/username')
            .then(response => response.json())
            .then(data => setUser(data))
            .catch(error => console.error(error));
    }, []);

    return (
        <div>
            {user && (
                <div>
                    <img src={user.avatar_url} alt={user.name} />
                    <h1>{user.name}</h1>
                    <p>{user.bio}</p>
                </div>
            )}
        </div>
    );
}

export default App;

上面的代码中，使用了 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