ES6中promise的使用方法

先看看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);