Question

我正在阅读这里等待的例子：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function 它有两个不同的使用例子。然而，它并没有提到行为是不同的。

以下代码：

function resolveAfterXSeconds(x, secs) {
  return new Promise(resolve => {
    setTimeout(() => {
        console.log("Resolving ",secs)
      resolve(x);
    }, secs * 1000);
  });
}

async function add(x) {
  const a = await resolveAfterXSeconds(20,4);
  const b = await resolveAfterXSeconds(30,3);
  return x + a + b;    
}

add(10).then(v => {
  console.log(v);
});

打印：

解决4
  解决3
  60

但如果我将add修改为以下内容：

async function add(x) {
  const p_a = resolveAfterXSeconds(20,4);
  const p_b = resolveAfterXSeconds(30,3);
  return x + await p_a + await p_b;
}

它打印以下内容（无论变量的顺序如何）：

解决3
  解决4
  60

为什么数字的打印顺序不同？

Answer 1

在第一个版本中，第一个resolveAfterXSeconds函数调用返回一个等待的promise，即在中执行<{1}}函数中没有其他代码，直到解析了promise。只有这样，才能拨打add。

在第二个变体中，两个resolveAfterXSeconds函数调用立即生成，无需等待。因此resolveAfterXSeconds都将执行，第一个调用它的回调是具有较小延迟参数的回调。因此，第二个承诺（setTimeout值为3）将比第一个承诺更早解决（secs值为4）。

你还在等待两个承诺的事实，并没有改变他们解决的时刻（并打印到控制台）。

简而言之，不同之处在于，在第一个版本中，第二个承诺在第一个承诺解决之前不会创建。在第二个中，两个承诺同时创建。第一个版本需要4 + 3秒才能完成，第二个版本需要最多4（4,3）秒才能完成。

为什么await在使用时有不同的行为？

1 个答案: