React组件Fetch请求报503错误且Promise返回值被忽略问题求助

嘿，我来帮你梳理下代码里的问题和你遇到的Fetch请求异常的原因～

1. 导致"Promise returned from fetchData is ignored"警告的直接原因 #

你在组件函数的顶层直接调用了fetchData()，这不仅会导致组件每次渲染都重复发起请求，而且这个异步函数返回的Promise没有被await或者.catch()处理，所以控制台会抛出这个警告。React组件的顶层应该只放状态声明、钩子定义这类代码，直接执行异步函数是不符合规范的。

2. 为什么无法获取响应还出现503错误？ #

首先，503是服务端返回的「临时不可用」状态码，可能的情况有这几种：

• 你调用的jsonplaceholder测试API临时维护或过载了
• 你的网络环境有代理、防火墙之类的拦截了请求
• 另外，你的fetchData函数里没有处理HTTP错误——fetch API只有在网络层面出错时才会抛出异常，像503这种HTTP错误状态码不会自动触发catch，所以你没法及时捕获到错误。

3. 还有一个隐藏问题：没把获取到的数据更新到状态里 #

你的函数里打印了data，但没调用setUsers(data)，就算请求成功了，组件也不会渲染出用户数据哦。

修复后的完整代码 #

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

const Users = () => {
  const [users, setUsers] = useState([]);
  const [errorMsg, setErrorMsg] = useState('');

  useEffect(() => {
    // 把异步函数放到useEffect内部，确保只在组件挂载时执行一次
    const fetchData = async () => {
      try {
        const url = `https://jsonplaceholder.typicode.com/users`;
        const response = await fetch(url, {
          method: 'GET',
          mode: 'cors',
        });

        // 手动检查响应状态，HTTP错误状态码也要抛出异常
        if (!response.ok) {
          throw new Error(`请求失败：${response.status} ${response.statusText}`);
        }

        const data = await response.json();
        setUsers(data); // 更新状态，让组件渲染数据
        console.log('获取到的数据：', data);
      } catch (err) {
        setErrorMsg(err.message);
        console.error('获取数据出错：', err);
      }
    };

    fetchData();
    console.log('effect执行了');
  }, []); // 空依赖数组，确保只在组件挂载时执行一次

  // 根据状态渲染不同内容
  if (errorMsg) {
    return <div className="error">出错啦：{errorMsg}</div>;
  }

  return (
    <div className="users-container">
      {users.length === 0 ? (
        <p>加载中...</p>
      ) : (
        <ul>
          {users.map(user => (
            <li key={user.id}>{user.name} - {user.email}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default Users;

关键修复点总结 #

• 把fetchData移到useEffect内部，并且通过空依赖数组确保只在组件挂载时发起一次请求，同时移除了顶层的fetchData()调用，解决Promise被忽略的警告
• 添加try/catch捕获所有错误，包括网络错误和HTTP错误（通过检查response.ok）
• 调用setUsers(data)把获取到的数据更新到状态，让组件能渲染出用户列表
• 增加了错误状态和加载状态的渲染，提升用户体验

如果还是遇到503错误，可以试试切换到手机热点这类不同的网络环境，或者过一段时间再访问jsonplaceholder的API——公共测试服务偶尔会有临时的可用性问题哦。

内容的提问来源于stack exchange，提问作者Asking