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)
  }

  return response?.data ? response?.data : null
}

// 其他页面
import { fetchData } from '../../getAllUsers'

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

// 错误：尝试对 Promise 对象调用 map 方法
const users = response.map(item => ({
  id: item.id,
  fullName: `${item.fname} ${item.lname}`,
  username: item.account.username,
  password: 'test',
  emal: item.email, // 注意：这里原问题是 'emal'，应为 'email'
  role: 'admin'
}))

console.log(users) // 会抛出 "TypeError: response.map is not a function"

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

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

  useEffect(() => {
    // 定义一个异步函数来加载数据
    const loadUsers = async () => {
      try {
        setLoading(true); // 开始加载时设置加载状态
        const data = await fetchData(); // 关键：在这里使用 await 等待 Promise 解析

        if (data) {
          // Promise 解析后，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 {
          setUsers([]); // 如果没有数据，设置为空数组
        }
      } catch (e) {
        console.error("获取用户数据失败:", e);
        setError("无法加载用户数据。请稍后再试。"); // 设置错误信息
      } finally {
        setLoading(false); // 无论成功或失败，加载结束
      }
    };

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

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

  if (error) {
    return <div style={{ color: 'red' }}>错误: {error}</div>;
  }

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

export default UserListPage;