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 监听结果