如何在异步函数中重复执行 Promise？

Question

我正在学习promise和async await，在这里我想调用addPost函数并两次推送一个对象，然后我想循环遍历该对象数组以查看结果，但是在这段代码中结果不如预期。在这里，当代码执行到showDetails()函数时，它只显示3个对象，但应该有四个对象，我在这里漏掉了什么？

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

Answer 1

在这里，你的addPost不是一个promise函数。这就是为什么当你写了"await addPost"时，它看起来像是重新初始化了变量addPost。为了使它工作，你需要调用promise函数。这样，在你调用之后它将执行promise工作。

以下是你修改过的代码

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

如果这对你来说清楚，请告诉我。

谢谢

Answer 2

当你使用new Promise()创建一个promise时，它会立即开始运行。你可以通过在控制台中运行类似于new Promise(() => { console.log("hello") })的代码来测试这一点 - 你应该立即看到一个日志。

你可以通过定义一个返回新Promise的函数来实现你想要的行为。这样，只有在调用该函数时，你的promise才会运行，而每次函数调用都会返回一个不同的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();