JavaScript嵌套async函数调用FB.ui未等待异步执行完成问题

await关键字仅对Promise对象生效，你当前的Fb函数没有将FB.ui的回调执行逻辑封装为完整的Promise返回，导致函数调用后直接返回空值或未完成状态的Promise，外层的await会直接结束，才会出现日志打印提前执行的问题。

将Fb函数内部的FB.ui调用、后续Api.put逻辑全部包装到一个新的Promise实例中，根据执行结果调用resolve返回最终结果，或者reject抛出错误即可，外层await会自动等待这个Promise的状态变更后再执行后续代码。

改造后的Fb函数示例 #

async function Fb(/* 你的业务入参 */) {
  // 直接返回Promise实例，外层await会监听这个实例的状态
  return new Promise((resolve, reject) => {
    FB.ui({
      // 你的FB.ui配置参数，比如分享方法、跳转地址等
      method: 'share',
      href: '你的业务页面地址'
    }, async (uiResponse) => {
      try {
        // 按你的业务规则判断FB.ui返回是否正常
        if (uiResponse && !uiResponse.error_code) {
          // 等待自有服务接口提交完成
          const putRes = await Api.put(/* 你的接口入参，可携带uiResponse的返回数据 */)
          // 把最终需要的结果抛出，外层拿到的resFb就是这个值
          resolve({
            success: true,
            fbResult: uiResponse,
            serverResult: putRes
          })
        } else {
          // FB.ui返回错误的场景，按需返回结果或者直接抛出异常
          resolve({
            success: false,
            errorMsg: uiResponse?.error_message || 'FB调用失败'
          })
          // 需要走异常捕获分支的话可以替换为 reject(new Error('FB调用失败'))
        }
      } catch (err) {
        // 捕获Api.put或者其他逻辑的异常
        reject(err)
      }
    })
  })
}

外层调用逻辑无需修改 #

async function onConfirmed() {
  try {
    const submitRes = await submit(/* 你的提交入参 */)
    // 按你的业务规则判断submit是否无报错
    if (submitRes.code === 0) {
      const resFb = await Fb(/* 你的入参 */)
      // 现在日志会在Fb所有逻辑执行完成后才触发，拿到正确返回值
      console.log('Fb执行结果：', resFb)
    }
  } catch (err) {
    // 统一捕获所有异步流程的异常
    console.error('执行出错：', err)
  }
}

• 所有需要返回给外层的结果都必须通过resolve/reject抛出，不要在Promise回调外层写额外的return逻辑，否则会导致Promise状态提前结束
• 如果你不需要捕获FB.ui的错误走异常分支，也可以全部用resolve返回不同状态的结果，外层根据返回字段判断即可

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