如何将 React 中的 REST API 与 fetch 和 Axios 集成-js教程-PHP中文网

How to Integrate REST APIs in React with fetch and 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>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{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>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{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>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{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中文网其他相关文章！