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

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《如何将 React 中的 REST API 与 fetch 和 Axios 集成》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

在 React 应用中集成 REST API

将 REST API 集成到 React 应用是前端开发的常见需求。REST (Representational State Transfer) 是一种架构风格，允许通过 HTTP 方法 (GET, POST, PUT, DELETE 等) 与外部资源 (数据) 交互。React 可以轻松地与 REST API 集成，实现高效的数据获取、新增、更新和删除操作。

本文将介绍如何使用 fetch API 和 Axios 等方法在 React 应用中集成 REST API，并处理异步数据获取。

1. 从 REST API 获取数据

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

使用 fetch API 获取数据

以下示例演示如何使用 fetch API 从 REST API 获取数据并在 React 组件中显示：

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

const apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // 示例 REST API

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

  useEffect(() => {
    // 从 API 获取数据
    fetch(apiUrl)
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应不正常');
        }
        return response.json();
      })
      .then(data => {
        setPosts(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误: {error}</div>;

  return (
    <div>
      <h1>文章列表</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 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js。它提供比 fetch 更简洁的语法，并支持自动 JSON 转换、请求取消等附加功能。

安装 Axios

使用 npm 安装 Axios:

npm install axios

使用 Axios 获取数据

以下示例与上一个示例相同，但使用 Axios:

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

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

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

  useEffect(() => {
    // 使用 Axios 从 API 获取数据
    axios.get(apiUrl)
      .then(response => {
        setPosts(response.data);
        setLoading(false);
      })
      .catch(error => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误: {error}</div>;

  return (
    <div>
      <h1>文章列表</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPostsAxios;

• axios.get(): 从 REST API 获取数据。Axios 自动将响应解析为 JSON。
• 错误处理: 捕获并显示错误信息。

3. 向 REST API 发送数据 (POST 请求)

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

使用 fetch 发送 POST 请求

import React, { useState } from 'react';

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

const CreatePost = () => {
  const [title, set

以上就是《如何将 React 中的 REST API 与 fetch 和 Axios 集成》的详细内容，更多关于的资料请关注golang学习网公众号！