Promise 简单应用

// Promise 解决 callback hell 问题

// load img
function loadImage(src){
  return new Promise((resolve,reject)=>{
    const img = document.createElement("img")
    img.onload=()=>{
      resolve(img)
    }
    img.onerror=()=>{
      const err = new Error(`图片加载失败 ${src}`)
      reject(err)
    }
    img.src=src
  })
}
// 加载一个图片事例

// const url = "https://www.apple1.com.cn/v/mac/home/ba/images/overview/hero/dark/m1_icon__fiwfgl7tngya_medium_2x.jpg"
// loadImage(url).then(img=>{
//   console.log(img.width)
//   return img
// }).then(img=>{
//   console.log(img.height)
// }).catch(ex=>console.error(ex))

// 分批加载两个
const url1 = "https://www.apple.com.cn/v/mac/home/ba/images/overview/hero/dark/m1_icon__fiwfgl7tngya_medium_2x.jpg"
const url2 ="https://www.apple.com.cn/v/mac/home/ba/images/overview/hero/dark/macbook_pro_13__ft1pc3lqwd6y_medium.jpg"

loadImage(url1).then(img=>{
  console.log(img.width)
  return img //普通对象
}).then(img=>{
  console.log(img.height)
  return loadImage(url2) //Promise 实例
}).then(img=>{
  console.log(img.width)
  return img
}).then(img=>{
  console.log(img.height)
}).catch((ex)=>console.error(ex))