react如何调取数据

在React中调取数据的方法

使用fetch API进行数据获取

fetch是浏览器原生支持的API，用于发起网络请求。在React中可以直接使用它来获取数据。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

使用axios库

axios是一个流行的HTTP客户端库，提供更简洁的API和更好的错误处理。

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

在useEffect中调用数据

React的useEffect钩子适合在组件挂载或更新时执行数据获取操作。

import { useState, useEffect } from 'react';

function DataComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return <div>{data && data.message}</div>;
}

使用async/await简化代码

async/await语法可以让异步代码更易读。

useEffect(() => {
  async function fetchData() {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      setData(data);
    } catch (error) {
      console.error('Error:', error);
    }
  }
  fetchData();
}, []);

使用React Query管理数据

React Query是一个专门用于数据获取和状态管理的库，提供缓存、自动更新等功能。

import { useQuery } from 'react-query';

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

  if (isLoading) return 'Loading...';
  if (error) return 'Error!';

  return <div>{data.message}</div>;
}

使用GraphQL客户端（如Apollo）

如果后端使用GraphQL，可以使用Apollo Client等库来获取数据。

import { useQuery, gql } from '@apollo/client';

const GET_DATA = gql`
  query GetData {
    data {
      message
    }
  }
`;

function DataComponent() {
  const { loading, error, data } = useQuery(GET_DATA);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return <div>{data.data.message}</div>;
}

处理加载和错误状态

良好的用户体验需要处理加载状态和错误情况。

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => 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>{data.message}</div>;
}

以上方法涵盖了从简单到复杂的数据获取场景，可以根据项目需求选择合适的方式。