在等待完成之前正在調用 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。