React中调用async函数返回Promise {<pending>}无法获取返回值问题

问题复现 #

从helperUtils工具文件导出的getResponseId函数逻辑为：调用后端接口拉取数组数据，内部做序号计算后返回新生成的ID，接口调用本身运行正常。但在.jsx文件中调用该函数时，控制台打印结果始终为Promise {<pending>}，拿不到预期的计算结果。

工具函数源码（Helperutils.js） #

export const getResponseId = async (idStart) => { 
  const res = await getResponsIdApiNew(idStart);  
  if (res.length === 0) {    
    return (idStart + "1");
  } else {    
    let numbersArray = [];
    for (let j = 0; j < res.length; j++) {      
      if (res[j].substring(idStart.length, res[j].length)[0] !== "") {            
        numbersArray.push(Number(res[j].slice(idStart.length, res[j].length)));           
      }
    }
    if (numbersArray.length !== 0) {         
      const max = Math.max(...numbersArray);              
      let exist = false;
      for (let i = 1; i <= max; i++) {           
        if (!res.includes(idStart + i)) {          
          exist = true;
          idStart = idStart + i;
          console.log(idStart); // 此处打印的就是预期拿到的值
          break;
        }
      }
      if (exist) {
        console.log(idStart); // 此处打印的就是预期拿到的值
        return (idStart);
      } else {
        let number = max + 1;
        console.log(idStart + number)     
        return (idStart + number);
      }
    }
  }  
};

已尝试的错误调用方式 #

先后在.jsx中写了两种调用逻辑，均未拿到正确结果：

• 第一种写法：

const getNewIdResponse = async () => {
  await getResponseId(`${getTopic}_${typeResponseTitle}_`);
};
console.log(getNewIdResponse);

• 第二种写法：

const getNewIdResponse = getResponseId(`${getTopic}_${typeResponseTitle}_`);
console.log(getNewIdResponse);

控制台打印结果如下：

根本原因 #

所有带async关键字声明的函数，无论内部return的是普通字符串、数字还是其他类型值，对外返回的永远是Promise包装对象：

• 第一种写法的错误：定义了getNewIdResponse异步函数后，既没有return内部await拿到的结果，也没有执行这个函数，直接打印函数引用本身，不可能拿到计算结果。
• 第二种写法的错误：虽然执行了getResponseId()，但Promise从pending状态变为resolved状态需要等待异步接口请求完成，同步执行的console.log触发时，异步流程还没走完，自然只能拿到pending状态的Promise。

正确调用方式 #

异步函数的结果只能通过两种方式获取：await等待Promise resolve，或者通过.then()回调拿值。

普通JS/JSX场景写法 #

const getNewIdResponse = async () => {
  // 注意要return 内部await拿到的结果
  return await getResponseId(`${getTopic}_${typeResponseTitle}_`);
};

// 方式1：.then回调拿值
getNewIdResponse().then(finalId => {
  console.log('生成的最终ID：', finalId); // 此处即可拿到预期的实际值
})

// 方式2：在另一个async函数中用await拿值
const init = async () => {
  const finalId = await getNewIdResponse();
  console.log('生成的最终ID：', finalId);
}
init();

React组件内使用的写法 #

配合useEffect和useState处理异步逻辑，避免渲染问题：

import { useEffect, useState } from 'react';

function YourComponent() {
  const [responseId, setResponseId] = useState('');

  useEffect(() => {
    const fetchId = async () => {
      const finalId = await getResponseId(`${getTopic}_${typeResponseTitle}_`);
      setResponseId(finalId);
      console.log('生成的最终ID：', finalId);
    }
    fetchId();
  }, [getTopic, typeResponseTitle])

  return (
    // 组件渲染逻辑，responseId更新后会自动触发重渲染
    <div>{responseId}</div>
  )
}

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