在JavaScript中混用async/await与.then()是否存在问题？

首先可以明确：你给出的示例代码本身不存在逻辑问题，运行结果和全 await 写法完全一致。await 本质是 Promise 等待兑现的语法糖，其后只要是合法的 Promise 对象即可，.then() 链执行后返回的本身就是 Promise 实例，所以语法和运行逻辑都完全合法。

大家常说的「混用容易导致难以排查的bug」，主要指以下几种常见的错误使用场景：

• 错误处理逻辑混乱
  如果你在 .then() 链单独加了 .catch()，同时外层又套了 try/catch 包裹 await 语句，很容易出现错误被内层 .catch() 吞掉、外层拿到不符合预期的返回值的问题。比如下面的写法：

  // 错误示例
  async function getParams(assetId) {
    const reqUrl = `https://somelink/${assetId}`
    try {
      const assetParam = await fetch(reqUrl)
        .then(res => res.json())
        .catch(e => console.log(e))
      // 此处如果接口报错，catch 会吞掉错误返回 undefined，直接访问 assetParam 会抛出运行时错误
      return assetParam.asset.params
    } catch (e) {
      // 接口报错时这里根本触发不到，错误已经被内层 catch 处理了
      console.error('请求失败', e)
    }
  }
  

  全 await 写法的错误处理逻辑会更统一，所有异步步骤的报错都会被外层 try/catch 捕获，不容易出现漏处理的情况。
• 中间变量获取成本高
  如果你后续迭代需求需要获取异步链的中间结果，比如 fetch 返回的原始响应头、响应状态码，.then() 链式写法需要额外定义外部作用域变量存储中间值，很容易引发作用域污染或者变量赋值时序问题。全 await 写法每一步的执行结果都保存在单独变量中，随时可以取用，修改成本更低。
• 异步时序逻辑容易写错
  同时处理多个异步任务时，混用两种写法很容易把并行、串行逻辑搞混。比如你本意想并行执行两个异步请求，结果写混了之后变成了串行执行，这种时序问题不会直接抛出报错，只会导致性能下降，排查起来难度极高。

如果只是你示例中的简单场景，不需要中间变量、错误处理逻辑统一，混用两种写法完全没有问题，不需要强制要求全写逐行 await 语句。

// 你的示例代码，逻辑完全正常
async function getParams(assetId) {
  const reqUrl = `https://somelink/${assetId}`
  const assetParam = await fetch(reqUrl)
    .then((res) => res.json())
    .then((json) => json.asset.params)
  return assetParam
}

如果你嫌逐行 await 繁琐，也可以使用嵌套 await 写法达到同样的效果：

async function getParams(assetId) {
  const reqUrl = `https://somelink/${assetId}`
  return (await (await fetch(reqUrl)).json()).asset.params
}

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