async/await example not working. What am I doing wrong

Question

I am trying to learn the concepts of async/await in javascript. I tried a simple code, to wait for a create post function to finish before calling the getPosts function, but the newly created post is not showing up. This is what I have tried out.

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

Can anyone point out what I am doing wrong?

Similar to https://stackoverflow.com/questions/33289726/combination-of-async-function-await-settimeout. Maybe this helps you. — fl9, Jun 02 '19 at 12:40
All the answers below which says to create promise are mixing two concepts. Yes, await works with promises, but await is better used with async as mentioned in CMS's answer [below](https://stackoverflow.com/a/56415196/1955268) — prinkpan, Jun 02 '19 at 13:08

score 3 · Accepted Answer · answered Jun 02 '19 at 12:42

3

createPost should return promise like below

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

answered Jun 02 '19 at 12:42

P D K Pavan Kumar

321
1
8

Isn't using promises with await mixing two similar concepts? Promises are better used with `.then()` and `await` is better used with `async` – prinkpan Jun 02 '19 at 13:10
By default async returns promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function – P D K Pavan Kumar Jun 02 '19 at 13:16

score 2 · Answer 2 · answered Jun 02 '19 at 12:47

The problem is that createPost doesn't return a promise.

You can either return a promise manually:

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

But who want's to create promises by hand ? And since you want to practice with async functions, have createPost be an async function by itself.

I'm also extracting the setTimeout calls to a small wait async utility function:

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

score 0 · Answer 3 · answered Jun 02 '19 at 12:43

May I know why you're using setTimeout() function? removing the setTimeout() makes the code just work fine

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

Here is the working code pen: Code Pen Link

score 0 · Answer 4 · answered Jun 02 '19 at 12:44

0

createPost should return a promise so the function should be like that

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

answered Jun 02 '19 at 12:44

Muho

3,188
23
34

Charlie · Answer 5 · 2019-06-02T12:51:39.663

The await command expects the calling function to return a promise. Such a function usually execute an asynchronous command and resolves the promise when the command is successful.

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

In this case, although Array.push() doesn't do any async operation, you call it via setTimeout to do it in an async fashion.

score 0 · Answer 6 · answered Jun 02 '19 at 12:45

Async/await only works with promises, so you need to wrap whatever code you have in createPost() in a promise, return it and then resolve it to indicate that it doesn't have to be awaited anymore and the code can continue executing. I made a tiny example from your code where you can see how it works:

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

score 0 · Answer 7 · answered Jun 02 '19 at 12:50

createPost is not any async function, await will listen only to promise and async function, to be able to await that kind of setTimeout, and to apply ur intent, u need promise with done method to tell Nodejs to end listening

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

async/await example not working. What am I doing wrong

7 Answers7