異步/等待示例不起作用。 我究竟做錯了什么

Question

我正在嘗試學習javascript中異步/等待的概念。 我嘗試了一個簡單的代碼，在調用getPosts函數之前要等待create post函數完成，但是新創建的post沒有出現。 這就是我嘗試過的。

 const posts = [{ title: "Post One", body: "This is post one" }, { title: "Post Two", body: "This is post two" } ] const newpost = { title: "Post Three", body: "This is post three" } function getPosts() { setTimeout(() => { let output = ''; posts.forEach((post, index) => { output += `<li>${post.title} : ${post.body}</li>`; }); document.body.innerHTML = output; }, 1000); } function createPost(post) { setTimeout(() => { posts.push(post); }, 2000); } async function init() { await createPost(newpost); getPosts(); } init(); 

誰能指出我做錯了什么？

Answer 1

createPost應該返回promise，如下所示

function createPost(post) {
return new Promise((resolve,reject)=> {
setTimeout(() => {
    posts.push(post);
    resolve();
  }, 2000);
});  
}

Answer 2

問題在於createPost不會返回承諾。

您可以手動返回承諾：

function createPost(post) {
  return new Promise((resolve) => {
  setTimeout(() => {
    posts.push(post);
    resolve();
  }, 2000);
  });  
}

但是誰願意手工創造諾言😉？ 並且由於您要練習異步功能，因此請讓createPost本身就是一個異步功能。

我還將setTimeout調用提取到一個小的wait異步實用程序函數中：

 const posts = [{ title: "Post One", body: "This is post one" }, { title: "Post Two", body: "This is post two" } ] const newpost = { title: "Post Three", body: "This is post three" } const sleep = time => new Promise(resolve => setTimeout(resolve, time)); async function getPosts() { await sleep(1000); let output = ''; posts.forEach((post, index) => { output += `<li>${post.title} : ${post.body}</li>`; }); document.body.innerHTML = output; } async function createPost(post) { await sleep(2000); posts.push(post); } async function init() { await createPost(newpost); getPosts(); } init(); 

Answer 3

我可以知道為什么要使用setTimeout()函數嗎？ 刪除setTimeout()可使代碼正常運行

 const posts = [{
    title: "Post One",
    body: "This is post one"
  },
  {
    title: "Post Two",
    body: "This is post two"
  }
]

const newpost = {
  title: "Post Three",
  body: "This is post three"
}

function getPosts() {
    let output = '';
    posts.forEach((post, index) => {
      output += `<li>${post.title} : ${post.body}</li>`;
    });
    document.body.innerHTML = output;
}

function createPost(post) {
    posts.push(post);
}

async function init() {
  await createPost(newpost);
  getPosts();
}

init();

這是工作代碼筆： 代碼筆鏈接

Answer 4

createPost應該返回一個Promise，所以函數應該像這樣

function createPost(post) {
  return new Promise( resolve => 
    setTimeout(() => {
      posts.push(post);
      resolve()
    }, 2000);
  });
}

Answer 5

await命令期望調用函數返回一個promise。 這樣的函數通常執行異步命令，並在命令成功時解決承諾。

 var posts = []; function createPost(post) { return new Promise(function(resolve, reject){ setTimeout(() => { posts.push(post); resolve(); //<- resolved the promise here }, 2000); }) } async function testAsync() { await createPost('a post'); console.log(posts) } testAsync(); 

在這種情況下，盡管Array.push（）不執行任何異步操作，但是您可以通過setTimeout調用它以異步方式進行操作。

Answer 6

異步/等待僅適用於promise，因此您需要將在createPost()中擁有的所有代碼包裝在promise中，將其返回，然后對其進行解析以表明不再需要等待它，並且代碼可以繼續執行。 我從您的代碼中舉了一個小例子，您可以看到它的工作原理：

 function getPosts(){ setTimeout(()=>{ console.log( "get posts" ); }, 1000); } function createPost(post){ return new Promise( res => { setTimeout(()=>{ console.log( "post created" ); res(); }, 2000); } ); } async function init(){ await createPost(); getPosts(); } init(); 

Answer 7

createPost不是任何異步函數，await將僅偵聽promise和async函數，以便能夠等待這種setTimeout並應用您的意圖，您需要promise與done方法一起告訴Nodejs結束偵聽

function createPost(post) {
  return new Promise(done){
    setTimeout(() => {
      posts.push(post);
      done()
    }, 2000);
  }
}