手写用 Promise 加载一张图片

使用 Promise 来解决 callback hell 回调地狱的问题，举例演示

先定义一个 Promise 的函数

function loadImg(src) {
  return new Promise((resolve, reject) => {
    const img = document.createElement('img');
    img.onload = () => {
      console.log(1);
      resolve(img);
    };
    img.onerror = () => {
      console.log(2);
      const err = new Error(`图片加载失败 ${src}`);
      reject(err);
    };
    console.log(3);
    img.src = src;
  });
}

然后怎么使用

const url1 =
  'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';
const url2 =
  'https://box.bdimg.com/static/fisp_static/common/img/searchbox/logo_news_276_88_1f9876a.png';
loadImg(url1)
  .then((img1) => {
    console.log('img1.width ' + img1.width);
    return img1;
  })
  .then((img1) => {
    console.log('img1.height ' + img1.height);
    return loadImg(url2); //promise实例解决 callback hell
  })
  .then((img2) => {
    console.log('img2.width ' + img2.width);
    return img2;
  })
  .then((img2) => {
    console.log('img2.height ' + img2.height);
  })
  .catch((err) => {
    console.log(err);
  });
// 3
// 1
// img1.width 540
// img1.height 258
// 3
// 1
// img2.width 276
// img2.height 88