javascript - 为什么我的异步/等待示例不起作用？

Question

我无法理解 async/await 的整个概念，并且花了数小时阅读文档并试图让示例起作用。但我仍然不明白为什么这个小例子不起作用。

我想要的结果是 document.body.innerHTML 包含文本“123”，因为 doFirst() 应该在 doSomething() 之前完成运行 完成。

但我总是得到“132”，就好像我根本没有使用过 async/await 一样。我做错了什么？

async function doFirst() {
  document.body.innerHTML = document.body.innerHTML + "1";
  setTimeout(function() {
    document.body.innerHTML = document.body.innerHTML + "2";
  }, 500);
}

async function doSomething()
{
  await doFirst();
  document.body.innerHTML = document.body.innerHTML + "3";
}

doSomething();

很抱歉再次发布这个问题，上次我发布这个问题时它被标记为重复。所以这一次我想澄清一下，我不是在寻找任何答案来告诉我如何正确地做到这一点，而是在寻找关于为什么我的代码不起作用的解释。

Answer 1

那是因为 doFirst() 返回一个在计时器用完之前解决的 promise 。与您的预期相反，setTimeout 不会暂停脚本执行。

为了确保 doFirst() 在计时器用完后 解析，您需要将整个函数包装在 Promise 中目的。计时器一旦用完就会调用 resolve() 方法，如下所示:

function doFirst() {
  return new Promise(resolve => {
    document.body.innerHTML = document.body.innerHTML + "1";
    setTimeout(function() {
      document.body.innerHTML = document.body.innerHTML + "2";
      resolve();
    }, 500);
  });
}

async function doSomething()
{
  await doFirst();
  document.body.innerHTML = document.body.innerHTML + "3";
}

doSomething();

如果你想避免callback hell , 一种更简洁的方法是简单地创建一个实用函数来在 setTimeout 之后解析一个 promise ，然后你可以等待从该函数返回的 promise 在将“2”打印到 DOM 之前被解析:

// Utility function that resovles a promise after a given duration
function sleep(duration) {
  return new Promise(resolve => setTimeout(resolve, duration));
}

async function doFirst() {
  document.body.innerHTML = document.body.innerHTML + "1";
  await sleep(500);
  document.body.innerHTML = document.body.innerHTML + "2";
}

async function doSomething()
{
  await doFirst();
  document.body.innerHTML = document.body.innerHTML + "3";
}

doSomething();