在React应用中正确处理Axios异步数据响应

// getAllUsers.js
import axios from 'axios';

export const fetchData = async () => {
  let response;
  try {
    response = await axios.get('http://127.0.0.1:8000/api/users');
  } catch (e) {
    console.error('数据获取失败:', e.message);
    // 在错误发生时返回null或空数组，以便调用者可以处理
    return null;
  }
  // 如果请求成功，返回响应数据，否则返回null
  return response?.data || null;
};

// 错误的用法示例
import { fetchData } from '../../getAllUsers';

// 这里的response实际上是一个Promise，而不是实际的数据数组
const response = fetchData();

// 尝试对一个Promise调用.map()会导致TypeError
// "TypeError: response.map is not a function"
const users = response.map(item => ({
  id: item.id,
  fullName: `${item.fname} ${item.lname}`,
  username: item.account.username,
  password: 'test', // 注意：实际应用中不应硬编码密码
  email: item.email,
  role: 'admin'
}));

console.log(users);

import React, { useEffect, useState } from 'react';
import { fetchData } from '../../getAllUsers';

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

  useEffect(() => {
    const getUsers = async () => {
      try {
        setLoading(true);
        setError(null);
        // 使用await等待fetchData返回的Promise解析，获取实际数据
        const data = await fetchData();

        if (data) {
          const transformedUsers = data.map(item => ({
            id: item.id,
            fullName: `${item.fname} ${item.lname}`,
            username: item.account.username,
            // 确保敏感信息如密码不应在前端处理或显示
            email: item.email,
            role: 'admin'
          }));
          setUsers(transformedUsers);
        } else {
          setUsers([]); // 如果没有数据，设置为空数组
        }
      } catch (err) {
        console.error("处理用户数据失败:", err);
        setError("无法加载用户数据，请稍后再试。");
      } finally {
        setLoading(false);
      }
    };

    getUsers(); // 调用异步函数
  }, []); // 空依赖数组表示只在组件挂载时运行一次

  if (loading) return <div>加载中...</div>;
  if (error) return <div style={{ color: 'red' }}>错误: {error}</div>;
  if (users.length === 0) return <div>暂无用户数据。</div>;

  return (
    <div>
      <h1>用户列表</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.fullName} ({user.username}) - {user.email} [{user.role}]
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

import { fetchData } from '../../getAllUsers';

// 这是一个顶层（非React组件内部）的例子
const processUsers = () => {
  fetchData()
    .then(data => {
      // data是fetchData返回的实际数据（数组或null）
      if (data) {
        const users = data.map(item => ({
          id: item.id,
          fullName: `${item.fname} ${item.lname}`,
          username: item.account.username,
          email: item.email,
          role: 'admin'
        }));
        console.log('处理后的用户数据 (使用.then()):', users);
      } else {
        console.log('未获取到用户数据。');
      }
    })
    .catch(error => {
      console.error('获取或处理用户数据时发生错误:', error);
    });
};

// 调用函数来启动数据获取和处理
processUsers();