如何在非同步函數中重複執行 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();