React 中的数据获取

数据获取是 React 应用程序的基础，支持加载用户数据、动态渲染内容等功能。 React 提供了一个灵活的数据处理生态系统，可以根据应用程序的复杂性和性能需求选择各种库和方法。在本文中，我们将探讨 React 中数据获取的几个关键方法，包括 Fetch API、Axios、Async/Await、React Query、SWR 和 GraphQL。

---

1. 使用 Fetch API 获取数据

Fetch API 是一个内置的 Web API，它使网络请求更加简单，并受到现代浏览器的广泛支持。它返回一个 Promise，该 Promise 使用表示 API 请求中的数据的 Response 对象进行解析。

例子

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

何时使用 Fetch API

• 小型项目或具有基本数据获取需求的项目。
• 与基于浏览器的应用程序的最小依赖性和兼容性。

---

2. 使用axios获取数据

Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js，它提供比 Fetch API 更多的功能，例如请求和响应拦截器以及转换请求和响应的能力。

例子

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

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Axios 的好处

• 支持可能不完全支持 Fetch API 的旧版浏览器。
• 通过拒绝 HTTP 错误代码提供更好的错误处理。
• 允许简单的请求和响应转换，使其在更大、更复杂的应用程序中流行。

---

3. 使用 Async/Await 语法以获得更好的可读性

使用 async 和await，在 JavaScript 中处理异步代码变得更加清晰。 Fetch API 和 Axios 都可以使用 async/await 语法，让代码更容易阅读。

获取示例

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

异步/等待的好处

• 提高了可读性，并且比承诺链更容易处理。
• 允许我们使用 try/catch 块进行错误处理。

---

4. React Query：强大的数据获取和缓存库

React Query 处理服务器状态的缓存、同步和更新，使您能够轻松获取、更新和缓存数据。 React Query 的自动数据缓存和重新获取使其成为复杂应用程序的流行选择。

例子

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

React 查询的好处

• 数据缓存和后台刷新。
• 与 API 集成良好，并处理网络故障的重试逻辑。
• 减少了管理加载、错误和重新获取状态的代码。

---

5. Vercel 的 SWR（Stale-While-Revalidate）

SWR 是另一个数据获取库，它优先考虑缓存和重新验证策略。 SWR 由 Vercel 开发，每当用户重新访问页面时，它都会在后台自动重新获取数据，从而保持数据最新。

例子

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

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

驻波比的好处

• 使用缓存优先的数据获取和自动后台重新验证。
• 与流行的后端框架和 RESTful API 集成。
• 非常适合需要用最少的代码保持数据最新的应用程序。

---

6. 使用 GraphQL 获取数据

GraphQL 是一种 API 查询语言，可以更好地控制返回的数据。它允许您仅获取所需的字段，这可以通过减少过度获取或获取不足来提高性能。

Apollo 客户端示例

要开始使用 Apollo Client，请通过运行 npm install @apollo/client graphql 来安装它。

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

GraphQL 的好处

• 通过控制检索的字段实现更高效的数据获取。
• 减少网络负载，特别有利于复杂或嵌套数据。
• 与 Apollo Client 等库良好集成，改善开发者体验。

---

结论

在 React 中选择正确的数据获取方法取决于您项目的复杂性、性能需求以及您对库和工具的偏好。这是一个快速总结：

• Fetch API：适合小型项目；内置且最小。
• Axios：更高级的 HTTP 客户端，具有更好的错误处理能力。
• Async/Await：提高异步代码的可读性和可管理性。
• React Query：非常适合缓存、后台重新获取和服务器状态管理。
• SWR：重新验证时过时策略，非常适合获取新数据。
• GraphQL with Apollo：最适合需要特定字段的复杂数据需求。

以上是React 中的数据获取的详细内容。更多信息请关注PHP中文网其他相关文章！