async await 如何在 JavaScript 中使用 setTimeout()答案

【问题标题】：How async await works in JavaScript with setTimeout()async await 如何在 JavaScript 中使用 setTimeout()
【发布时间】：2018-11-14 20:49:05
【问题描述】：

为什么这段代码不起作用

我想用简单的方法学习同步

const post = [];

function getPost(post) {
     console.log(post)
 }

async function createPost (post) {
  await setTimeout(() => {
    post.push({
      name: "John", work: "Developer"
    })
  }, 1000)
  getPost(post);
}

createPost(post);

【问题讨论】：

标签： javascript

【解决方案1】：

它不起作用，因为setTimeout 没有返回承诺。如果您 await 是非 Promise，您只需立即获得价值（几乎¹）。您还想使用 createPost 返回的承诺，而您的代码目前没有这样做。

你必须为setTimeout 做一个包装器，它返回一个承诺，例如as shown in my answer here，尽管这些天我会稍微修改一下：

function timeout(delay, ...args) {
    return new Promise(function(resolve) {
        setTimeout(resolve, delay, ...args);
    });
}

这适用于您的代码，尽管我假设您的代码中的 setTimeout 实际上是一些其他异步操作（ajax、MongoDB 等）的替代品，我不会以这种方式构建代码（我会让post 创建并由createPost 返回，而不是createPost 关闭的数组）：

function timeout(delay, ...args) {
    return new Promise(function(resolve) {
        setTimeout(resolve, delay, args);
    });
}

const post = [];

function getPost(post) {
    console.log(post)
}

async function createPost(post) {
  await timeout(1000);
  post.push({
      name: "John", work: "Developer"
  });
  getPost(post);
}

// Going async at top level
(async () => {
    await createPost(post);
})().catch(error => {
    console.error(error);
});

¹ “几乎立即” a = await b; ... 是 Promise.resolve(b).then(a => ...) 的语法糖（非常非常好的糖）（加上错误处理）。如果b 不是一个承诺，则分配给a 的任务发生在await 发生的任务之后的微任务处理中。my answer here 中有关任务和微任务的更多信息。

【讨论】：