先看看ES5中异步编程的使用。
let ajax = function (callBlack) {
setTimeout(function () {
callBlack && callBlack()
}, 1000);
}
ajax(function () {
console.log(1)
});
在ES6中使用Promise来解决异步编程。
let ajax = function () {
return new Promise(function (reslove, reject) {
setTimeout(function () {
reslove()
}, 1000);
})
}
ajax().then(function () {
console.log(1);
})
有多个步骤，让异步编程更加简单。
let ajax = function () {
return new Promise(function (reslove, reject) {
setTimeout(function () {
reslove()
}, 1000);
})
}
ajax().then(function () {
console.log(1);
return new Promise(function (reslove, reject) {
setTimeout(function () {
reslove()
}, 2000);
})
}).then(function () {
console.log(2)
});
在Promise中可以使用catch来捕获异常。
let ajax = function (num) {
return new Promise(function (reslove, reject) {
if (num > 1) {
reslove();
return;
}
throw new Error("错误");
})
}
ajax(0).then(function () {
console.log("正确");
}).catch(function (err) {
console.log(err);
});
下面是一个案例，目的是当页面的图片都加载完才把图片显示到页面中，如果其中有一个出错了就不显示。
function loading(src) {
return new Promise((resolve, reject) => {
let img = document.createElement("img");
img.src = src;
img.onload = function () {
resolve(img);
};
img.onerror = function (err) {
reject(err)
}
})
}
function showimg(imgs) {
imgs.forEach(function (img) {
document.body.appendChild(img);
});
}
Promise.all([
loading("./img/banner01.jpg"),
loading("./img/banner02.jpg")
]).then(showimg);
下面这个例子是当图片先加载的先显示出来，没加载的就不再显示了。
function loading(src) {
return new Promise((resolve, reject) => {
let img = document.createElement("img");
img.src = src;
img.onload = function () {
resolve(img);
};
img.onerror = function (err) {
reject(err)
}
})
}
function showimg(imgs) {
let p = document.createElement("p");
p.appendChild(imgs)
document.body.appendChild(p);
}
Promise.race([
loading("./img/banner01.jpg"),
loading("./img/banner02.jpg")
]).then(showimg);