Comment exécuter Promise à plusieurs reprises dans une fonction asynchrone ?

Question

J'apprends promise et async wait, ici je veux appeler la fonction addPost et pousser un objet deux fois, puis je veux parcourir le tableau d'objets pour voir le résultat, mais dans ce code, le résultat n'est pas aussi attendu. Ici, lorsque le code s'exécute sur la fonction showDetails(), il n'affiche que 3 objets alors qu'il devrait y en avoir quatre, qu'est-ce qui me manque ici ?

const posts = [{ titre : 'Post 1' }, { titre : 'Post 2' }];
nombre de variables = 3 ;

const diffFunction = async () =>
    const addPost = new Promise((résoudre, rejeter) => {
        setTimeout(() => {
            posts.push({ titre : `Post ${count}` });
            compte++;
            résoudre (compte);
        }, 1000)
    })
    const deletePost = new Promise((res, rej) => {
        setTimeout(() => {
            const deltedPost = posts.pop();
            res(deltedPost);
        }, 2000)
    })

    const showDetails = () =>
        posts.forEach(element => {
            console.log(element.titre);
        });
    }
    attendre addPost ;
    attendre addPost ;
    afficher les détails();
}
diffFunction();

Answer 1

Ici, votre addPost n'est pas une fonction de promesse. C'est pourquoi lorsque vous écrivez "await addPost", il semble que la variable addPost soit réinitialisée. Pour que cela fonctionne, vous devez appeler la fonction promise. De cette façon, il effectuera le travail promis après votre appel.

Ce qui suit est votre code modifié

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

Si cela est clair pour vous, faites-le-moi savoir.

Merci

Answer 2

Lorsque vous utilisez le code de new Promise()创建一个promise时，它会立即开始运行。你可以通过在控制台中运行类似于new Promise(() => { console.log("hello") }) pour tester cela, vous devriez voir un journal immédiatement.

Vous pouvez obtenir le comportement souhaité en définissant une fonction qui renvoie une nouvelle promesse. De cette façon, votre promesse ne s'exécutera que lorsque la fonction sera appelée, et chaque appel de fonction renverra une promesse différente.

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