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('API请求失败:', e.message);
    // 在生产环境中，可能需要更详细的错误处理或向上抛出错误
    return null; 
  }

  // 如果请求成功且有数据，返回数据部分；否则返回null
  return response?.data ? response.data : null;
};

// 错误的消费方式示例
import { fetchData } from '../../getAllUsers';

// 此时 response 变量接收到的是一个 Promise 对象，而不是实际的数据数组
const response = fetchData(); 

// 尝试对 Promise 对象调用 .map() 会导致 "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',
  emal: item.email,
  role: 'admin'
}));

console.log(users); // 永远不会执行到这里，因为上面已经报错

// UserListPage.js
import React, { useEffect, useState } from 'react';
import { fetchData } from '../../getAllUsers'; // 假设路径正确

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

  useEffect(() => {
    const getUsers = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await fetchData(); // 使用 await 等待 Promise 解决

        if (data) {
          // 确保 data 是一个数组，或者至少是可迭代的
          if (Array.isArray(data)) {
            const processedUsers = data.map(item => ({
              id: item.id,
              fullName: `${item.fname} ${item.lname}`,
              username: item.account.username,
              password: 'test', // 注意：实际应用中不应硬编码密码
              email: item.email, // 修正拼写错误：emal -> email
              role: 'admin'
            }));
            setUsers(processedUsers);
          } else {
            // 如果 API 返回的不是数组，可能需要特殊处理
            console.warn("API返回的数据不是数组:", data);
            setError("获取到的数据格式不正确。");
          }
        } else {
          setUsers([]); // 如果没有数据，设置为空数组
        }
      } catch (err) {
        console.error("获取用户数据失败:", err);
        setError("无法加载用户数据。");
      } finally {
        setLoading(false);
      }
    };

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

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

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

  return (
    <div>
      <h1>用户列表</h1>
      {users.length === 0 ? (
        <p>没有找到用户。</p>
      ) : (
        <ul>
          {users.map(user => (
            <li key={user.id}>
              {user.fullName} ({user.username}) - {user.email}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default UserListPage;

// 另一种消费方式示例 (非React组件环境或特定场景)
import { fetchData } from '../../getAllUsers';

fetchData()
  .then(data => {
    if (data && Array.isArray(data)) {
      const users = data.map(item => ({
        id: item.id,
        fullName: `${item.fname} ${item.lname}`,
        username: item.account.username,
        password: 'test',
        email: item.email,
        role: 'admin'
      }));
      console.log('通过 .then() 获取的用户数据:', users);
    } else {
      console.log('没有获取到用户数据或数据格式不正确。');
    }
  })
  .catch(error => {
    console.error('通过 .then() 获取数据时发生错误:', error);
  });