React中调用async函数返回Promise如何正确获取返回值？

原因说明 #

所有async函数的返回值默认是Promise对象，直接同步调用时只会拿到处于Pending状态的Promise实例，必须通过异步回调的方式才能获取函数内部return的实际值。

解决方法 #

你可以选择以下任意一种方式获取实际返回值：

• 方式1：在async函数作用域内使用await获取（兼容性最好）

// 将调用逻辑封装到async函数中
async function generateScriptModel() {
  const scriptRes = await getScriptText(props.sessionItem["induction"], iDicto);
  const scriptModel = [{ script: scriptRes }];
  // 后续要使用scriptModel的逻辑都放在这个函数内执行
  console.log(scriptModel);
}
// 执行函数
generateScriptModel();

• 方式2：顶层await（仅支持ES模块环境、Node.js 14.8+、现代浏览器）

const scriptRes = await getScriptText(props.sessionItem["induction"], iDicto);
const scriptModel = [{ script: scriptRes }];
console.log(scriptModel);

• 方式3：使用.then链式回调获取

getScriptText(props.sessionItem["induction"], iDicto).then(scriptRes => {
  const scriptModel = [{ script: scriptRes }];
  // 后续逻辑放在then回调内执行
  console.log(scriptModel);
});

额外优化建议 #

你当前写的getScriptText函数中，await后面跟随的是普通对象，属于无意义的写法，只有await后面跟随Promise实例/异步操作时才会生效，你可以直接把这行的await删掉，功能不受影响，性能更优。

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