約束を待っている間にmap/forEachのタイミング問題

Question

タイミングの問題があります。何が起こっているのは、chrome.storage.local.getが呼び出される前にtoDataUrlが完了しないことです。 dataUrlの準備ができたら、どのようにリファクタリングしてマップや他のループを動かすことができますか？私は非同期を待って、forEachをマップに変更したり、その逆に変更したりしました。 whileループとカウンタを試してみましたが、正しく実装していないのでしょうか？

明確にするには、現時点では発生していないすべてのループが完全に完了したら、chrome.storage.local.getを呼び出す必要があります。データURLに

：

const toDataURL = url => fetch(url) 
     .then(response => response.blob()) 
     .then(blob => new Promise((resolve, reject) => { 
     const reader = new FileReader() 
     reader.onloadend =() => resolve(reader.result) 
     reader.onerror = reject 
     reader.readAsDataURL(blob) 
    })) 

本体：

app.checkOfflineStorage = function(quotes) { 

    let nQuotes = quotes; 

    nQuotes.data.map(function(e, idx) { 

    if(e.attachments) { 
     e.attachments.data.forEach(function(el) { 

     if(el.type === 'quote-picture') { 

      toDataURL(`https://quotecatalog.imgix.net${el.value}?w=110`).then(function(res) { 

      el.dataURI = res; 

     }) 
    } 

    }) 
} 

if(e.title) { 
    if(typeof e.title.data.attachments !== 'undefined') { 
    var title_attachments = e.title.data.attachments.data; 

    title_attachments.forEach(function(el) { 

toDataURL(`https://quotecatalog.imgix.net${el.value}?w=110`).then(function(res) { 

     el.dataURI = res; 
     }) 
    }) 
    } 
} 
    }) 


    chrome.storage.local.get('offlineCache', 


    if (Object.keys(storedQuoteArray).length === 0) { 

    console.log(nQuotes) 
    chrome.storage.local.set({"offlineCache": nQuotes}, function(res) {}); 

    } else { 


    console.log(nQuotes) 
    var combinedArray = storedQuoteArray.offlineCache.data.concat(nQuotes.data) 

    combinedArray = combinedArray.slice(0, 100) 
    console.log('100', combinedArray) 

    chrome.storage.local.set({"offlineCache": {"data": combinedArray}}, function(res) {}); 
    } 

    }) 
    } 

Answer 1

Promise.allの簡単な例：

Promise.all(e.attachments.data.map(function(el) { 
    if(el.type === 'quote-picture') { 
     return toDataURL(`https://quotecatalog.imgix.net${el.value}?w=110`) 
    } 
);) 
.then(function (resultArray) { 
// Handle results array 
});