Promise實現多圖預載入

Promise正如它的中文意思「承諾」一樣，保存著未來會發生事件（一般為非同步操作）。Promise避免了「回調地獄」，寫法更加接近同步操作。說到同步，我更加喜歡async、await，它們書寫更貼近同步操作。

圖片載入往往是非同步的，如果有操作需要等到所有的圖片載入完之後再執行，這時候就需要不斷的監聽所有圖片的載入情況。

ES5

利用ES5實現多圖預載入，可以通過計數器判斷有多少圖片載入完成。

var count = 0, // 計數器
imgs = ;

/*
* （Array）source 圖片url
* （Fun）cb 回調
*/ function preLoadImg(source, cb) { source.forEach(function(url, i) { imgs[i] = new Image; imgs[i].onload = function { if(++count === source.length) { cb && cb; } } imgs.src = url; }) }

ES6

ES6原生提供了Promise對象，接下來用Promise改寫上面的代碼。

// 預處理圖片
function preLoadImg(source){
let pr = ;
source.forEach(url => {// 預載入圖片
let p = loadImage(url)
.then(img => this.images.push(img))
.catch(err => console.log(err))
pr.push(p);
})

// 圖片全部載入完
Promise.all(pr)
.then( => {
// do sth
});

}
// 預載入圖片
function loadImage(url) {
return new Promise((resolve, reject) => {
let img = new Image;
img.onload = => resolve(img);
img.onerror = reject;
img.src = url;
})
}

Promise實際上是將回調操作獨立出來，當Promise狀態從pending（進行中）改為resolved（已完成），then註冊的函數就會被執行，如果狀態從pending改為rejected（已失敗），就會被catch捕獲。

這裡想Promise.all傳入了一個Promise數組，數組中的Promise狀態均為resolved，Promise.all的狀態才會是resolved，否則Promise.all的狀態為rejected。也就是說，當所有圖片載入完成後，才會執行then中的函數。為了防止有圖片載入失敗，阻塞後續操作，為每一個p添加catch，捕獲reject，Primise.all就接受不到了。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！