javascript - async await 如何在 JavaScript 中使用 setTimeout()

Question

为什么这段代码不起作用

我想以简单的方式学习同步

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);

Answer 1

它不起作用，因为 setTimeout 没有返回 promise 。如果您 await 一个非 Promise，您只会立即获得值(几乎¹)。您还希望使用 createPost 返回的 promise ，而您的代码目前并未这样做。

您必须为返回 promise 的 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 不是一个 promise，则对 a 的赋值发生在 await 发生的任务之后的微任务处理中。更多关于任务和my answer here 中的微任务.