如何将 React 中的 REST API 与 fetch 和 Axios 集成

React 中的 REST API 集成

将 REST API 集成到 React 应用程序中是 Web 开发人员的一项常见任务。 REST（表述性状态传输）是一种架构风格，允许您通过 HTTP 方法（如 GET、POST、PUT、DELETE 等）与外部资源（数据）进行交互。React 可以轻松地与 REST API 集成，从而允许您获取数据、发布新数据并高效处理各种 API 响应。

在本指南中，我们将探索如何使用 Fetch API、Axios 等不同方法将 REST API 集成到 React 应用程序中，并处理异步数据获取。

---

1.从 REST API 获取数据

fetch() 函数内置于 JavaScript 中，提供了一种发出 HTTP 请求的简单方法。它返回一个 Promise，该 Promise 解析为表示对请求的响应的 Response 对象。

在 React 中使用 fetch API

这是一个使用 fetch API 从 REST API 获取数据并将其显示在 React 组件中的简单示例。

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• useState：用于存储帖子、加载状态和任何错误消息。
• useEffect：挂载组件时处理数据的获取。
• fetch()：从 REST API 端点获取数据，然后将其处理为 JSON 格式。
• 错误处理：捕获任何错误（例如网络问题）并设置错误状态。

---

2.使用 Axios 进行 API 请求

Axios 是一个适用于浏览器和 Node.js 的基于 Promise 的 HTTP 客户端。它是 fetch 的替代方案，通常因其更简洁的语法和自动 JSON 转换、请求取消等附加功能而受到青睐。

安装 Axios

要使用 Axios，首先通过 npm 安装它：

npm install axios

使用axios获取数据

这里是与上面相同的示例，但使用的是 Axios。

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API using Axios
    axios
      .get(API_URL)
      .then((response) => {
        setPosts(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• axios.get()：从 REST API 获取数据。 Axios 自动将响应解析为 JSON。
• 错误处理：如果有错误，它会被捕获并显示在组件中。

---

3.将数据发送到 REST API（POST 请求）

除了 GET 请求之外，您还可以使用 POST 请求将数据发送到服务器。这通常用于提交表单或创建新记录。

使用 fetch 进行 POST 请求

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• POST 请求：以 JSON 格式向 API 发送数据。在本例中，我们将发送带有标题和正文的新帖子。
• JSON.stringify()：将 JavaScript 对象转换为请求正文的 JSON 字符串。

使用 Axios 进行 POST 请求

npm install axios

• axios.post()：向 API 发送 POST 请求。请求正文包含要发送的数据。

---

4.结论

将 REST API 集成到 React 应用程序中是现代 Web 开发的一项关键技能。无论您使用 fetch() 还是 Axios 等库，React 都为您提供了 useEffect 和 useState 等强大的钩子来管理 API 请求并根据响应更新 UI。您可以优雅地获取数据、发送数据和处理错误，确保流畅的用户体验。

---

以上是如何将 React 中的 REST API 与 fetch 和 Axios 集成的详细内容。更多信息请关注PHP中文网其他相关文章！