Promise加载图片用法详解

2019年8月20日 230次阅读 来源: 我是一个前端

如今不会用Promise都不好意思说本身是前端，Promise为何火起来，一句话处理了回调嵌套和实行递次题目最主要的我觉得是处理递次题目。

不过最先写之前我们先看看，promise怎样处理题目，怎样用。
枚举一个递次加载图片demo：

//需求 加载三张图片 img1，img2，img3，加载递次是1，2，3
        let url1 = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293635140,3955114282&fm=26&gp=0.jpg"
        let url2 = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg"
        let url3 = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4226468334,723383513&fm=26&gp=0.jpg"
        let oImg1 = new Image()
        oImg1.onload = function() {
            console.log('img1加载终了')
            let oImg2 = new Image()
            oImg2.onload = function() {
                console.log('img2加载终了')
                let oImg3 = new Image()
                oImg3.onload = function() {
                    console.log('img3加载终了')
                    console.log('悉数加载终了')
                }
                oImg3.src = url3
            }
            oImg2.src = url2
        }
        oImg1.src = url1

//效果没缺点
《Promise加载图片用法详解》

接下来我们尝尝promise怎样做，

        function loadImg(url) {
            let img = new Image()
            img.src = url
            return new Promise((resolve, reject) => {
                img.onload = () => {
                    console.log(url)
                    resolve()
                }
                img.onerror = (e) => {
                    reject(e)
                }
            })
        }


        loadImg(url1).then(() => {
            return loadImg(url2)
        }).then(() => {
            return loadImg(url3)
        })

《Promise加载图片用法详解》

接下来再看看Promise.all,

//需求 加载三张图片 img1，img2 悉数加载完成做一些事变
        let urls = ["https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293635140,3955114282&fm=26&gp=0.jpg",
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg"
        ]


        function loadImg(url) {
            let img = new Image()
            img.src = url
            return new Promise((resolve, reject) => {
                img.onload = () => {
                    resolve(img)
                }
                img.onerror = (e) => {
                    reject(e)
                }
            })
        }

        function loadAll(arr) {
            let result = []
            arr.forEach(item => {
                let p = loadImg(item).then((img) => {
                        console.log(img)
                    })
                    //存储当前Promise对象
                console.log(p)
                result.push(p)
            });
            Promise.all(result).then(() => {
                //悉数完成
                console.log("done")
            }).catch((err) => {
                // 有失利的状况
                console.log(err)
            });
        }
        loadAll(urls)

《Promise加载图片用法详解》

完成。。。

    原文作者：我是一个前端
    原文地址: https://segmentfault.com/a/1190000017932375
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞