JavaScript中如何获取Promise.then()内嵌套if else的返回值（含axios场景）

问题根源 #

这是JavaScript异步编程的典型问题：twil.verificationChecks.create 是异步方法，返回值为Promise对象，.then() 回调的执行时机晚于外层的同步代码，所以你在定义verification之后立刻打印、直接返回，都无法拿到回调内的返回值。

方案1：继续使用.then链式调用 #

不要在外层直接读取verification的值，所有依赖这个返回结果的逻辑，都要放在 .then() 的回调里执行：

twil.verificationChecks.create({
  to: phone,
  code: vcode
}).then((verify) => {
  const otp = verify.status;
  const user = finduser;
  if (otp === "approved") { 
    if (user) { 
      find(); 
      return "user found"
    } else {
      add(); 
      return "user added"
    }
  }
  // 建议补充otp未通过的场景返回值，避免返回undefined
  return "otp not approved"
}).then(verification => {
  // 所有需要用到verification值的逻辑都写在这里
  console.log(verification) // 这里可以正常拿到返回的字符串
  // 后续业务逻辑...
})

方案2：使用async/await语法（更推荐，代码可读性更高） #

把这段逻辑放在async函数里，用await等待Promise执行完成，就能直接拿到返回值：

// 首先把外层函数声明为async
async function checkVerify() {
  const verify = await twil.verificationChecks.create({
    to: phone,
    code: vcode
  })
  const otp = verify.status
  const user = finduser
  let verification
  if (otp === "approved") {
    if (user) {
      find()
      verification = "user found"
    } else {
      add()
      verification = "user added"
    }
  } else {
    verification = "otp not approved"
  }
  console.log(verification) // 这里可以正常打印结果
  return verification // 注意：async函数的返回值依然是Promise，调用这个函数的地方也需要用await或者.then拿结果
}

// 调用时如果要拿返回值，同样需要await：
// const result = await checkVerify()

注意事项 #

• 只要是异步方法的返回值，都不能在同步代码里直接获取，所有依赖异步结果的逻辑要么放在.then回调里，要么用await等待异步执行完成。
• 原代码没有处理otp !== "approved"的分支，这种场景下.then回调没有返回值，会默认返回undefined，建议补充对应分支的返回逻辑。

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