Callback Hell、Promise 语法

最新推荐文章于 2020-09-24 00:52:57 发布

原创最新推荐文章于 2020-09-24 00:52:57 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#promise #Callback Hell

基础知识复习巩固专栏收录该内容

40 篇文章

订阅专栏

本文通过一个加载图片的例子，对比了使用传统Callback方式与Promise方式处理异步操作的不同。展示了如何利用Promise简化异步流程，避免Callback Hell的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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语法：