如何在 Javascript 中的 forEach 循環中使用異步/等待語法？

Question

我已經查看了幾個關於在 forEach 循環中使用 async/await 的問題，但似乎沒有任何內容涵蓋我的用戶案例......我怎樣才能讓下面的代碼工作？ 現在我收到以下錯誤：

await 是一個保留字

這是代碼：

export const fetchUserBookmarks = ( bookmarksIDs ) => async ( dispatch, getState, api ) => {

    dispatch({
        type: 'IS_FETCHING_BOOKMARKS'
    });

    try {

        bookmarks = [];

        bookmarksIDs.forEach( bookmarkID => {
            const bookmark = await api.get( selectedPostByIdEP + bookmarkID ); 
            bookmarks.push( bookmark ); 
        }); 

        dispatch({
            type: 'HAS_FETCHED_BOOKMARKS', 
            payload: bookmarks
        });

    } catch( error ) {

        dispatch({
            type: 'FAILED_FETCHING_BOOKMARKS', 
            payload: error
        });

    }

}

Answer 1

首先，要使用await您應該將該函數聲明為async 。 您已使用外部函數完成此操作，但未使用內部函數完成此操作。

更改將如下所示：

bookmarksIDs.forEach(async bookmarkID => {

其次，您可能想要並行運行這些 api 調用。

您可以用map調用替換forEach並一起等待所有結果承諾。

為此，您的代碼應如下所示：

const bookmarks = await Promise.all(
  bookmarksIDs.map(bookmarkID => 
    api.get( selectedPostByIdEP + bookmarkID )
  )
); 

——

似乎如果bookmarks未在其他任何地方聲明，則會導致問題。 使用const或let應該可以解決這個問題。

Answer 2

forEach不是一個循環； 它是您傳遞函數的函數。 沒有辦法從中得到承諾。 如果要api.get執行api.get ，可以使用 for 循環：

for (const bookmarkID of bookmarksIDs) {
    const bookmark = await api.get(selectedPostByIdEP + bookmarkID); 
    bookmarks.push(bookmark); 
}

如果你想並行執行它們，你可以創建幾個 promise 並使用Promise.all來收集它們的結果：

const bookmarks = await Promise.all(
    bookmarksIDs.map(
        bookmarkID => api.get(selectedPostByIdEP + bookmarkID)
    )
);

Answer 3

forEach 循環與 promise 和 async 函數不兼容。 使用for.. of循環代替。 它會工作得很好。

async(data)=>{
    const ids = ["xyz","abc"]
    for (const id of ids){
    let data = await Collection.findById(id)
    console.log(data)
    } 
}

Answer 4

你會想做這樣的事情而不是

try {

    bookmarks = await Promise.all(bookmarksIDs.map( bookmarkID => api.get( selectedPostByIdEP + bookmarkID )); 

    dispatch({
        type: 'HAS_FETCHED_BOOKMARKS', 
        payload: bookmarks
    });

}