React中如何创建可用于条件判断的异步fetch函数？

你的getStatus()返回的不是undefined，而是一个Promise对象——因为内部的fetchData是async函数，所有async函数默认都会返回Promise，而非直接的返回值。直接拿Promise和数字200比较，结果永远是false，看起来像"返回undefined"其实是因为你没正确处理Promise的resolve结果。

第一步：简化你的fetch函数 #

可以把嵌套的async函数简化成直接的async函数，逻辑不变但更清晰：

const getStatus = async () => {
  const response = await fetch(`http://localhost:3000`);
  const result = response.status;
  console.log(result);
  return result;
};

这个函数现在会返回一个Promise，当fetch完成后，Promise会resolve为实际的状态码。

第二步：正确获取状态码并用于条件判断 #

因为Promise是异步的，你必须等待它完成才能拿到结果，有两种方式：

方式1：使用await（需在async函数中）

在React的事件处理函数、useEffect回调或者自定义async函数中使用：

// 比如在点击事件中
const handleCheck = async () => {
  const status = await getStatus();
  const action = status === 200 ? 'Do something' : "Don't do something";
  // 这里执行你的逻辑，比如更新state、触发操作等
};

方式2：使用.then()链式调用

如果不想用async/await，可以用Promise的链式语法：

getStatus().then(status => {
  const action = status === 200 ? 'Do something' : "Don't do something";
  // 处理逻辑
});

第三步：在React渲染中使用状态码 #

如果要在组件渲染时根据状态码显示内容，需要用state存储结果（因为渲染函数不能是async的）：

import { useState, useEffect } from 'react';

function MyComponent() {
  const [status, setStatus] = useState(null);

  useEffect(() => {
    // 组件挂载时获取状态码
    const fetchStatus = async () => {
      const res = await fetch('http://localhost:3000');
      setStatus(res.status);
    };
    fetchStatus();
  }, []);

  return (
    <div>
      {status === 200 ? 'Do something' : 
       status !== null ? "Don't do something" : 
       'Loading...'}
    </div>
  );
}

关键提醒 #

永远不要直接拿Promise和原始值（比如数字200）比较，必须等待Promise resolve后拿到实际值，才能进行条件判断。

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