>[success] # 利用圖片預加載學會一些異步騷操作 ~~~ 1.利用 'reduce' 進行有序的異步加載請求 2.利用 for...of 進行有序請求 3.利用 Promise.all 做控制請求并發 ~~~ >[danger] ##### 利用reduce 來做 ~~~ const loadImage = urlId =>{ const url =`https://xxxx/${urlId}` return new Promise((resolve,reject) =>{ const img = new Image(); img.onerror = function(){ console.log("失敗"); reject(urlId) } img.onload = function(){ console.log("成功"); resolve(urlId) } img.src = url }) } const urlIds = [1,2,3,4] urlIds.reduce((acc,id)=>{ return acc.then(()=>loadImage(id)) },Promise.resolve()) ~~~ >[danger] ##### for of 配合awiter ~~~ const loadImage = urlId =>{ const url =`https://xxxx/${urlId}` return new Promise((resolve,reject) =>{ const img = new Image(); img.onerror = function(){ console.log("失敗"); reject(urlId) } img.onload = function(){ console.log("成功"); resolve(urlId) } img.src = url }) } const idls = async ()=>{ const ls = [1,23,4,5,6] for(let i of ls){ await loadImage(i) } } ~~~ >[danger] ##### 利用map 將promise 整體包裹 ~~~ // 利用map 配合promise all const loadImage = urlId =>{ const url =`https://xxxx/${urlId}` return new Promise((resolve,reject) =>{ const img = new Image(); img.onerror = function(){ console.log("失敗"); reject(urlId) } img.onload = function(){ console.log("成功"); resolve(urlId) } img.src = url }) } const ids = [1,2,3,4,5] const promiseArray = ids.map(id=>loadImage(id)) Promise.all(promiseArray).then(()=>{}) ~~~