手写用 promise 加载一张图片

只有一张图片时

function loadImg(src) {
    // 1.创建一个p存储一个Promise类的实例
    const p = new Promise(
        // 2.传入一个函数，内部有两个形参分别为resolve和reject，这两个形参同样也是函数
        (resolve, reject) => {
            //3. 先定义一张图片,创建一个element
            const img = document.createElement('img')
            //4. 加载完之后传入一个回调函数
            img.onload = () => {
                //5.通过resolve方法将要加载的对象传进来
                resolve(img)
            }
            //5.当遇到问题，就执行reject这个函数
            img.onerror = () => {
                //6. 失败的话就传入一个模板字符串,把错误信息传递出去
                const err = new Error(`图片加载失败${src}`);
                reject(err);
            }
            img.src = src;
        }
    )
    return p
}

const url = 'https://img3.sycdn.imooc.com/5b8cd5540001a30c02000200-140-140.jpg'


loadImg(url).then(img => {
    console.log(img.width); //140
    return img;
    // return了img后就会将img传入到下一个then的函数中
}).then(img => {
    console.log(img.height); //140
    //最后如果是有错误呢，就打印错误
}).catch(ex => console.error(ex))

有两张图片时：
修改调用并加入两个新的 then

const url1 = 'https://img3.sycdn.imooc.com/5b8cd5540001a30c02000200-140-140.jpg'
// 再找一个图片
const url2 = 'https://avatar.csdnimg.cn/0/1/A/1_weixin_44738381.jpg'


loadImg(url1).then(img1 => {
    console.log(img1.width);
    return img1 // return 一个普通对象
}).then(img1 => {
    console.log(img1.height)
    return loadImg(url2) //return 一个promise实例，下面的img2对应的就是新的实例下的img
}).then(img2 => {
    console.log(img2.width);
    return img2;
}).then(img2 => {
    console.log(img2.height);
}).catch(ex => console.error(ex));