promise加载图片

解决callback hell (回调地域)问题

    function loadImg(src){
            const p = new  Promise(
                (reslove,reject) =>{
                    const img = document.createElement('img');
                    img.onload = () =>{
                        reslove(img)
                    }
                    img.onerror = () =>{
                        const err = new Error(`图片加载失败 ${src}`);
                        reject(err)
                    }
                    img.src = src;
                }
            )
            return p
        }
        const url = 'https://m.360buyimg.com/babel/jfs/t1/145983/4/5065/136336/5f313fcfEa5213607/170f4951fa1a845e.jpg.webp'
        const url2 = 'https://img12.360buyimg.com/pop/s590x470_jfs/t1/136750/17/3835/71376/5f0434ecE1e5daa8d/7ab8f3deb1f8dd62.jpg.webp'
        loadImg(url).then(img1 =>{
            console.log(img1.width)
            return img1
        }).then(img1 =>{
            console.log(img1.height)
            return loadImg(url2)
        }).then(img2 =>{
            console.log(img2.width)
            return img2
        }).then(img2 =>{
            console.log(img2.height)
        }).catch(ex =>console.error(ex))

promise是异步编程的一种解决方案。
从语法上说Promise是一个对象，从他可以获取异步的消息。并且提供统一的 API，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。