Callback Hell、Promise 语法

Callback Hell

function loadImg(src, callback, fail) {
   var img = document.creatElement('img')
   img.onload = function () {
      callback(img)
   }
   img.onerror = function () {
      fail()
   }
   img.src = src
}
var src = 'https://profile.csdnimg.cn/5/A/C/2_qq_33699819'
loadImg(src, function (img) {
   console.log(img.width)
}, function () {
   console.log('failed')
})

Promise

function loadImg(src) {
   const promise = new Promise(function(resolve,reject){
	   var img = document.createElement('img')
	   img.onload = function() {
	       resolve(img)
	   }
	   img.onerror = function() {
	       reject()
	   }
	   img.src = src
	   })
	   return promise
}
var src='https://profile.csdnimg.cn/5/A/C/2_qq_33699819'
var result = loadImg(src)
result.then(function(img){
   console.log(img.width)
}, function() {
   console.log('fail')
})

result.then(function(img){
   console.log(img.height)
})

Promise语法：

• new Promise 实例，而且要 return
• new Promise 时要传入函数，函数有 resolve reject 两个参数
• 成功时执行 resolve() 失败时执行 reject()
• then 监听结果