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