Question 232025 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to run a Promise in async function more than once?

I’m learning promise and async await, here I want to call addPost function and push an object twice and then I want to loop on that array of objects to see the results, but in this code the result is not as expected. In this when the line hit showDetails() function it’s showing only 3 objects but there should be four objects, what am I missing here?

const posts = [{ title: 'Post 1' }, { title: 'Post 2' }];
var count = 3;

const diffFunction = async () => {
    const addPost = new Promise((resolve, reject) => {
        setTimeout(() => {
            posts.push({ title: `Post ${count}` });
            count++;
            resolve(count);
        }, 1000)
    })
    const deletePost = new Promise((res, rej) => {
        setTimeout(() => {
            const deltedPost = posts.pop();
            res(deltedPost);
        }, 2000)
    })

    const showDetails = () => {
        posts.forEach(element => {
            console.log(element.title);
        });
    }
    await addPost;
    await addPost;
    showDetails();
}
diffFunction();
Tags:

2

Answers


  1. 0

    When you create a promise with new Promise(), it starts running immediately. You can test this by running something like new Promise(() => { console.log("hello") }) in your console – you should see an immediate log.

    You can achieve the behaviour you want by defining a function returning a new Promise. That way your promise will only run when you call that function, and each function call will return a different Promise.

    const posts = [{ title: 'Post 1' }, { title: 'Post 2' }];
var count = 3;

const addPost = () => new Promise((resolve, reject) => {
    setTimeout(() => {
        posts.push({ title: `Post ${count}` });
        count++;
        resolve(count);
    }, 1000)
})

const deletePost = () => new Promise((res, rej) => {
    setTimeout(() => {
        const deltedPost = posts.pop();
        res(deltedPost);
    }, 2000)
})

const showDetails = () => {
    posts.forEach(element => {
        console.log(element.title);
    });
}

const diffFunction = async () => {
    await addPost();
    await addPost();
    showDetails();
}

diffFunction();

    You can see there I’ve changed addPost and deletePost to be functions rather than promises.

    Login or Signup to reply.
  2. 0

    The issue in your code is that you’re awaiting the addPost promise twice, but you’re missing the await keyword before the deletePost promise. Because of this, the showDetails() function is being called before the second addPost is complete, and you’re seeing only three objects in the array instead of four.
    To fix this, you should ensure that both addPost promises are awaited before calling the showDetails() function.

        const posts = [{ title: 'Post 1' }, { title: 'Post 2' }];
    var count = 3;
    
    const diffFunction = async () => {
        const addPost = new Promise((resolve, reject) => {
            setTimeout(() => {
                posts.push({ title: `Post ${count}` });
                count++;
                resolve(count);
            }, 1000);
        });
        
        const deletePost = new Promise((res, rej) => {
            setTimeout(() => {
                const deletedPost = posts.pop();
                res(deletedPost);
            }, 2000);
        });
    
        const showDetails = () => {
            posts.forEach(element => {
                console.log(element.title);
            });
        }
        
        await addPost;
        await addPost;
        await deletePost; // Add this await for the deletePost promise
        showDetails();
    };
    diffFunction();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search