处理异步操作与数据请求

在 React 应用中，异步操作和数据请求是非常常见的需求，尤其是在与后端 API 交互时。我们通常使用 fetch API 或者更高级的库（如 Axios）来发送请求并处理响应。

1. 使用 fetch API 进行数据请求

fetch 是一个用于网络请求的浏览器 API，它返回一个 Promise，允许我们进行异步数据获取。以下是一个简单的示例，展示如何使用 fetch 请求数据。

示例：获取用户数据

我们下面的例子将会从一个假设的 API 获取用户数据，并将其存储在组件的状态中。

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

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) { // 检查响应状态
          throw new Error('网络请求失败');
        }
        const data = await response.json();
        setUsers(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []); // 依赖数组为空，类似于 componentDidMount

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

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

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

代码解析：

1. **useState**：定义了三个状态变量：users（存储用户列表）、loading（表示加载状态）和 error（存储错误信息）。
2. **useEffect**：当组件挂载时执行 fetchUsers 函数。
3. fetchUsers 函数：异步函数中使用 fetch 发送 GET 请求，处理响应和错误。
4. 条件渲染：
   • 如果 loading 为 true，显示“加载中…”。
   • 如果有错误，显示错误信息。
   • 否则，将用户列表渲染到页面中。

2. 使用 Axios 进行数据请求

虽然 fetch 是十分强大的 API，但我们也可以使用 Axios，它提供了更加友好的 API 和更多功能，如请求和响应拦截器等。

示例：使用 Axios 获取用户数据

安装 Axios：

npm install axios

然后在组件中使用 Axios 进行数据请求：

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

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        setUsers(response.data); // 直接获取数据
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

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

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

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

Axios vs Fetch

• 简洁性：Axios API 更加简洁，特别是在处理响应时。
• 自动转换 JSON：Axios 会自动将响应数据转换为 JSON。
• 请求拦截和响应拦截：Axios 支持请求和响应拦截，可以添加 Token 或处理错误的逻辑。

3. 处理副作用和清理

在进行异步请求的同时，我们需要注意组件在卸载时的副作用处理。通常情况下，我们会使用一个变量来标识组件是否仍然挂载，以避免在未挂载的组件上进行状态更新。

useEffect(() => {
  let isMounted = true; // 标记组件是否挂载
  
  const fetchUsers = async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      if (!response.ok) throw new Error('网络请求失败');
      const data = await response.json();

      if (isMounted) {
        setUsers(data);
      }
    } catch (error) {
      if (isMounted) {
        setError(error.message);
      }
    } finally {
      if (isMounted) {
        setLoading(false);
      }
    }
  };

  fetchUsers();

  return () => { isMounted = false; }; // 清理函数，组件卸载时设置标记
}, []);

4. 总结

在 React 中处理异步操作与数据请求主要依靠 useEffect 钩子和状态管理。根据具体需求，你可以选择 fetch API 或 Axios 来实现数据请求，并根据请求状态渲染相应的 UI。务必注意清理副作用，以避免可能的内存泄漏和状态更新错误。

通过以上示例与介绍，希望你能熟练掌握在 React 应用中进行异步操作与数据请求的基本方法。