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