使用async await通過for循環在圖片onload加載成功后獲取成功的圖片地址

需求：有一個圖片列表，我想要在圖片onload成功之后獲取加載成功的圖片列表，圖片資源加載為異步，我們使用ES7的async await方式實現，多張圖片，是用for循環。

注意：圖片加載失敗一定要加監聽，await只有在有返回之后才會繼續向下執行，無論成功與失敗，否則第一張圖加載失敗，下面的await的都不會執行。

代碼實現：

let successImageList = [];
let imageUrlList = ["https://aaa.jpg", "http://image.biaobaiju.com/uploads/20190508/17/1557306553-NZiDWHaGKu.jpg", "http://img5.imgtn.bdimg.com/it/u=3025209343,1849399022&fm=26&gp=0.jpg"]

async function getSuccessImageList() {
    try{
        let imgTotal = imageUrlList.length;
        for (let i = 0; i < imgTotal; i++) {
            //第i張圖片加載完成,push到新數組中
            await addImageProcess(imageUrlList[i]).then((src) => {
                console.log(`第${i}張圖片src:${src}`)
                successImageList.push(src);
            }).catch((err)=>{
                console.log(`第${i}張圖片:${err}`)
            })
        }
        console.log(successImageList)
        function addImageProcess(src) {
            return new Promise((resolve, reject) => {
                let img = new Image()
                img.onload = () => resolve(src)
                img.onerror = ()=>reject("加載失敗")
                img.src = src;
            })
        }
    }catch(err){
       console.log(err)
    }
}

getSuccessImageList()

 

以上圖片鏈接從百度圖片獲取，侵刪。

參考鏈接：

https://zhuanlan.zhihu.com/p/68117645

https://stackoverflow.com/questions/46399223/async-await-in-image-loading