Array.map或循環替代內的承諾？

Question

我想知道如何解決以下問題。我有一個接受多個文件的上傳組件。所以onDrop給我accepted和rejected文件（基於擴展名和大小）。

從那些accepted我需要弄清楚他們是否有正確的尺寸，我想使用browser-image-size package。

這個包返回一個承諾，但正如你可以在下面看到的，我需要在提供的accepted參數中檢查每個文件。我嘗試了以下，但正如你所看到的，這總是返回一個emty數組並且未定義。

我該如何解決這個問題？

const checkDimensions = (file) => { 
 
    return Promise.resolve(file); 
 
} 
 

 
const handleFiles = (accepted, rejected) => { 
 
    const acceptedFiles = []; 
 
    const errors = []; 
 

 
    accepted.map(file => 
 
    checkDimensions(file) 
 
    .catch((error) => errors.push(error)) 
 
    .then((file) => acceptedFiles.push(file)) 
 
); 
 

 
    // both log empty array 
 
    console.log(acceptedFiles); 
 
    console.log(errors); 
 
} 
 

 
// Logs undefined 
 
console.log(handleFiles(['test file']))

Answer 1

您的控制檯日誌checkDimensions有機會去完成它的工作之前執行。

const handleFiles = (accepted, rejected) => { 
    const acceptedFiles = []; 
    const errors = []; 

    accepted.map(file => checkDimensions(file) 
    .then(file => acceptedFiles.push(file), error => errors.push(error)) 
    .then(() => { 
     console.log(acceptedFiles); 
     console.log(errors); 
    }); 
); 
} 

A then有一個可選的第二個參數。 catch後跟then與then之間的差異與2個參數是微妙的：如果checkDimensions決定拒絕一個文件，acceptedFiles.push(file)仍將被執行。