如何正确获取fetch请求的状态？解决返回Promise而非状态码问题

DevOps 小满

2026-7-17

如何正确获取async函数中fetch请求的状态码

问题原因

所有async函数的返回值都会被自动包装成Promise对象，哪怕你在函数内部return的是原始值（比如这里的201）。所以直接调用Verify(test)得到的不是状态码，而是一个处于pending/fulfilled状态的Promise。

解决方案

要获取Promise内部的实际值，必须通过await（在async上下文内）或者.then()链式调用的方式：

方案1：使用async/await（推荐）

因为React的useEffect回调不能直接是async函数（会导致返回Promise而非清理函数），所以需要在内部定义async函数并执行：

useEffect(() => {
  async function Verify(test) {
    const response = await fetch("/api/test", {
      method: "POST", 
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({test: test}),
    });
    const res = response.status;
    console.log(res); // 输出201
    return res;
  }

  // 单独定义async函数处理await逻辑
  async function handleFetch() {
    const status = await Verify(test);
    console.log(status); // 输出201
    // 这里可以将status存入state或执行其他业务逻辑
  }

  handleFetch();
}, [test]); // 记得添加依赖项test

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

如果不想用async/await，也可以直接通过Promise的.then()方法获取结果：

useEffect(() => {
  function Verify(test) {
    return fetch("/api/test", {
      method: "POST", 
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({test: test}),
    }).then((response) => {
      const res = response.status; 
      console.log(res); // 输出201
      return res;
    });
  }

  Verify(test).then(status => {
    console.log(status); // 输出201
    // 后续业务逻辑处理
  });
}, [test]);