React 入门第九天：与后端API的集成与数据管理

在React学习的第九天，我集中学习了如何与后端API进行集成。这一步是将静态的React应用转变为动态、可交互的关键。通过与后端通信，我们可以从服务器获取数据、发送用户输入以及处理复杂的业务逻辑。

1. 使用fetch进行数据请求

React没有内置的HTTP库，因此我们通常使用浏览器提供的fetch API或第三方库如axios来发送请求。

以下是一个使用fetch从API获取数据的示例：

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

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default DataFetchingComponent;

在这个例子中，我们使用useEffect在组件加载时发送HTTP请求，获取的数据存储在data状态中，并根据loading状态显示加载指示。

2. 使用axios进行数据请求

虽然fetch API足够强大，但在实际项目中，开发者更倾向于使用axios，因为它提供了更丰富的功能，如自动处理JSON、支持拦截器等。

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

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

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

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

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default DataFetchingComponent;

axios的使用方法与fetch类似，但它的API更加简洁，并且自动处理了JSON解析。

3. 数据的POST请求与表单处理

除了获取数据外，React应用通常还需要发送数据到服务器，例如处理表单提交。以下是一个简单的POST请求示例：

function SubmitFormComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    axios.post('https://api.example.com/submit', { input: inputValue })
      .then(response => {
        console.log('Data submitted:', response.data);
      })
      .catch(error => {
        console.error('Error submitting data:', error);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button type="submit">提交</button>
    </form>
  );
}

这里我们处理了表单的提交，通过axios.post发送用户输入的数据到服务器。

4. 处理请求状态与错误

在实际应用中，处理请求的各种状态（如加载、成功、失败）是非常重要的。以下是如何在React中优雅地处理这些状态的一个示例：

function EnhancedDataFetchingComponent() {
  const [data, setData] = useState([]);
  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('Failed to fetch data');
        setLoading(false);
      });
  }, []);

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

  if (error) {
    return <div>{error}</div>;
  }

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

在这个例子中，我们通过状态管理对加载状态、成功状态和错误状态进行了区分，确保在不同的状态下展示不同的内容。

5. 小结与展望

第九天的学习让我掌握了React与后端API交互的基本方法，从GET请求获取数据到POST请求提交数据，再到如何处理各种状态和错误，这些都是构建动态应用时不可或缺的技能。