在等待完成之前正在调用 Function

Question

我正在尝试使用 async/await 进行一些操作，出于某种原因，我的 function 在等待完成之前运行，有人可以告诉我为什么吗？

 (function() { var posts = [{ title: "Post 1", body: "This is post 1" }, { title: "Post 2", body: "This is post 2" }, { title: "Post 3", body: "This is post 3" } ]; function GetPosts() { setTimeout(() => { let output = ''; posts.forEach((post, index) => { output += `<li>${post.title}</li>`; }); document.body.innerHTML = output; }, 1000); } function CreatePost(post) { setTimeout(() => { posts.push(post); }, 4000); } async function init() { await CreatePost({ title: "Post 4", body: "This is post 4" }); GetPosts(); } init(); })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

function CreatePost()不是async ，它不返回Promise 。 这就是为什么将await放在其调用之前没有任何效果的原因。

为了使其async ，让它创建并返回一个Promise ：

  async function CreatePost(post) {
    return new Promise((resolve) => {
      setTimeout(() => {
        posts.push(post);
        resolve();
      }, 4000);
    });
  }

getPosts()也是如此。

Answer 2

由于setTimeout不返回任何 promise。 它不会等到CreatePost function 被执行。 因此，将相同的东西包装在 Promise 中将有助于提供您正在寻找的 output。

 (function() { var posts = [{ title: "Post 1", body: "This is post 1" }, { title: "Post 2", body: "This is post 2" }, { title: "Post 3", body: "This is post 3" } ]; function GetPosts() { setTimeout(() => { let output = ''; posts.forEach((post, index) => { output += `<li>${post.title}</li>`; }); document.body.innerHTML = output; }, 1000); } //Wrap this with a new promise function CreatePost(post) { return new Promise((resolve, reject) => { setTimeout(() => { posts.push(post); resolve(); }, 3000); }) } async function init() { await CreatePost({ title: "Post 4", body: "This is post 4" }); GetPosts(); } init(); })();

Answer 3

如果你想使用async ， await是promise

 (function () { var posts = [{ title: "Post 1", body: "This is post 1" }, { title: "Post 2", body: "This is post 2" }, { title: "Post 3", body: "This is post 3" } ]; function GetPosts() { return new Promise(resolve => { setTimeout(() => { let output = ''; posts.forEach((post, index) => { output += `<li>${post.title}</li>`; resolve('success'); }); document.body.innerHTML = output; }, 1000); }) } function CreatePost(post) { return new Promise((resolve) => { setTimeout(() => { posts.push(post); resolve('success') }, 4000); }) } async function init() { const a = await CreatePost({ title: "Post 4", body: "This is post 4" }); const b = await GetPosts(); return b } init(); })();

Answer 4

function CreatePost(post) {
  //setTimeout is non-blocking
  setTimeout(() => {
    posts.push(post);
  }, 4000);
}

您基本上不会等待帖子被推送到列表中。 这就是它没有显示的原因。 如果 GetPosts 中的间隔小于 CreatePost 中的 on ，则它会显示。 它与异步/等待无关。 对 CreatePost 的调用首先不是异步的，因为您没有返回 Promise 。 第二件事是 setTimeout 不会阻塞，所以后面运行的每一个代码基本上都可以在回调被调用之前完成。

要使 CreatePost 真正异步，只需查看在等待完成之前调用 @axiac Function的答案注意：setTimeout 仍然是非阻塞的，代码不会按预期工作。 如果这不仅仅是锻炼，我会说摆脱 setTimeouts。