React 怎么请求数据

在 React 应用中，请求数据是一个常见的需求。无论是从后端 API 获取数据，还是从其他数据源获取信息，React 提供了多种方式来处理数据请求。本文将介绍几种常见的在 React 中请求数据的方法，包括使用 fetch、axios、useEffect 钩子以及第三方库如 React Query 和 SWR。

1. 使用 fetch API

fetch 是浏览器原生提供的用于发送网络请求的 API。它返回一个 Promise，可以通过 .then() 和 .catch() 来处理响应和错误。

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default FetchData;

优点：

• 原生支持，无需额外依赖。
• 简单易用。

缺点：

• 需要手动处理错误和加载状态。
• 不支持请求取消。

2. 使用 axios

axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了更多的功能，如请求取消、拦截器等。

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

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

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

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

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default AxiosData;

优点：

• 功能丰富，支持请求取消、拦截器等。
• 自动转换 JSON 数据。

缺点：

• 需要额外安装依赖。

3. 使用 useEffect 钩子

useEffect 是 React 提供的一个钩子，用于在组件渲染后执行副作用操作，如数据请求。通常与 fetch 或 axios 结合使用。

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

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

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

    fetchData();
  }, []);

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

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default UseEffectData;

优点：

• 与 React 生命周期紧密结合。
• 可以处理异步操作。

缺点：

• 需要手动处理加载和错误状态。

4. 使用 React Query

React Query 是一个强大的数据同步库，专门用于管理服务器状态。它提供了自动缓存、数据同步、错误处理等功能。

import React from 'react';
import { useQuery } from 'react-query';

function ReactQueryData() {
  const { data, isLoading, error } = useQuery('fetchData', () =>
    fetch('https://api.example.com/data').then(res => res.json())
  );

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

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default ReactQueryData;

优点：

• 自动缓存和数据同步。
• 简化了数据请求和状态管理。

缺点：

• 需要额外安装依赖。

5. 使用 SWR

SWR 是另一个用于数据请求的 React 钩子库，由 Vercel 开发。它提供了类似 React Query 的功能，但更加轻量级。

import React from 'react';
import useSWR from 'swr';

function SWRData() {
  const { data, error } = useSWR('https://api.example.com/data', url =>
    fetch(url).then(res => res.json())
  );

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

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default SWRData;

优点：

• 轻量级，易于集成。
• 自动缓存和数据同步。

缺点：

• 功能相对较少，适合简单场景。

总结

在 React 中请求数据有多种方式，选择哪种方式取决于具体的需求和项目的复杂性。对于简单的数据请求，fetch 或 axios 结合 useEffect 已经足够。对于需要更复杂的状态管理和数据同步的场景，React Query 或 SWR 是更好的选择。

无论选择哪种方式，都需要注意处理加载状态、错误处理以及数据的缓存和同步问题，以确保应用的用户体验和数据一致性。