ES6系列教程第一篇--Promise详解

小灰灰 2022-05-25 08:21 224阅读 0赞

**一、为什么要用Promise**

**     **在实际项目中，有下面应用场景，在手机上浏览电影网站，其中有个海报墙页面，里面有海量的电影节目，如下图所示。考虑到性能和用户体验，启动后，我们需要串行的加载10页数据(每页9张海报)，即第一页加载完成后，启动第二页的加载，以此类推。

![70][]

于是不假思索的写下了下面的代码：

$(document).ready(function(){
          //获取第一页数据
          $.getJSON("json/poster.json?page=1",function(result){
           attachPoster(result);
           //获取第二页数据
           $.getJSON("json/poster.json?page=2",function(result){
              attachPoster(result);
              //获取第三页数据
              $.getJSON("json/poster.json?page=3",function(result){
                attachPoster(result);
                 ...
              });
          });
         });
        });

一直写到自己恶心，这就是叫做"回调地狱"。

是否有解？有，那就是Promise

**二、Promise是什么**

还用上面的例子，改成下面的写法：

道友们先不用理会Promise的细节，从代码结构上看，比第一种的层层嵌套是不是更清晰，更符合逻辑。Promise就是为了解决回调函数嵌套的一种解决方案。

**三、then与resolve**

通过下面例子初步了解Promise是怎么玩的。

在getPObj中我们new了Promise对象p并返回该对象，在构造p对象的方法中，只有一个定时器，2s钟后打印一个日志和执行resolve入参方法。

我们调用getPObj执行下，结果如下：

![70 1][]

只是执行了日记，并没有看到resolve方法的执行，这也不奇怪，因为resolve作为构造函数的入参，我们根本就没有定义。

我们将代码改成下面

再次此时的执行结果：

![70 2][]

then的入参函数，就是resovle的回调方法。看到这里，大家可能会问，这不就是个callback作为入参的回调么，只不过用了then的属性方法传入的，一种表示方式而已，有啥稀奇的。如果只是一层嵌套是看不出优越性，还记得我们前面海报加载的场景么，如果嵌套多层，then的链式调用就发挥巨大优先性了，它能把层层嵌套平铺开来。

我们将上面的实例再改造下：

在每个回调执行完成后，再返回一个新的Promise对象，继续下一次操作。

![70 3][]

回过头来看我们开篇讲到海报加载的例子，到此可以理解了。

**四、reject**

细心的道友可能发现，在Promise对象的构造方法的入参中，还有个reject方法我们还没有讲到。

const promise = new Promise(function(resolve,reject){  
           somethingDO();  
           if (/*结果符合预期,异步操作成功*/) {  
                resolve()  
           }else/*不符合预期，操作失败*/  
           {  
               reject();  
           }  
        })

Pomise有三种状态，分别是pending(进行中)，resolved(已成功)，rejected(已失败)，一旦达到相应的状态，就会回调相应的方法。其实称作已成功，或者已失败并不准确，ES6中标准说法fullfiled，rejected。至于什么是已成功状态，什么是已失败状态，可以自己按照实际情况自定义。

![70 4][]

对应的，then方法有两个入参,分别实现resolved，rejected的回调方法。

promise.then(function(value) {
      // resolved
    }, function(error) {
      // rejected
    });

继续上面的实例，我们在方法增加控制，生成一个1-10的随机方法，如果大于5就表示失败。

执行的结果：

![70 5][]

第一次执行时，i的随机值就大于5，所以执行了rejected的方法。但是和我们预期的还是有点不一样，如果返回失败，我们希望终止掉整个链条，但是从实际结果看，是继续往下执行。这是因为，回调第一个reject的方法后，没有返回值，Promise会自动返回一个undefined，传入下一个链条的resolve方法中，并继续后面的then链。

有没有方法，一旦执行失败，就中断后面的then链条呢？有，各位继续往下。

**五、catch**

try...catch我们常用捕获异常的方法，在promise对象中也有catch的方法。用来捕获then回调方法中抛出的各类异常，用法如下：

p.then(function(){
             ...
    }).catch(e){
              ....
    }

现在我们用上面的实例构造一个异常。

执行的结果如下：

![70 6][]

捕获并打印了异常。

我们来解答第四章节提的问题，利用catch可终止then链条。如下

reject构造一个error的入参，抛出异常，为catch捕获。从执行结果看，后面的then的没有执行，达到目的。

![70 7][]

道友们看到这个实例中，每个then的reject的方法都删除了，catch方法实际就是实现了全局的reject方法。**在实际开发中，我们建议采用catch代替reject**。

**六、finally**

try...catch...finally是黄金组合，做过java开发的道友们对肯定非常熟悉。finally表示无论什么状态，必定都会执行。

执行结果：

![70 8][]

**七、all、race**

**1、all**

Promise.all可以将几个Promise对象封装成一个，格式如下：

Promise.all([p1,p2,p3]).then(function(data){...})

当这几个对象都变成resolved状态后，总状态变为resolved；否则，其中有一个为rejected状态，则变成reject，其他的可以忽略。可以理解为p1&&p2&&p3。

那返回的data是什么样子，如果是resolved状态，则是各个对象data的组合；如果是rejected，则是第一个到达rejected状态返回的data值。以例为证。

都为resolved状态：

执行的结果:  
![70 9][]

其中有一个返回rejected状态：

执行结果：

![70 10][]

2、race

race与all类似，页可以将几个Promise对象封装成一个，格式如下：

Promise.race([p1,p2,p3]).then(function(data){...})

不同的时，看谁执行的快，then就回到回调谁的结果。可以理解为p1||p2||p3

看实例：

执行结果(由于随机数，各位执行的结果会有不一样的情况)：

![70 11][]

当接受到第一个对象的resolved状态后，其他的两个抛弃处理。

**八、总结**

本文主要阐述了Promise的基本知识，在实际项目，有很多已经分装好的库可以使用，如q.js,when.js,jquery.deferred等，万变不离其踪，只要了解了基本的原理，这些库使用起来也会得心用手。

[下一篇：ES6系列教程第二篇--Iterator 详解][ES6_--Iterator]

[70]: /images/20220525/226decff4876448a8880eff6a97b1c8c.png
[70 1]: /images/20220525/80e7111e438c4fb5ae9c03dfc41b874b.png
[70 2]: /images/20220525/699bc59e843d4a63865f65c1005f212d.png
[70 3]: /images/20220525/5708ab9c9712452786907ce09b1836da.png
[70 4]: /images/20220525/61a018fa872744d89c04d28c07f50226.png
[70 5]: /images/20220525/a6949a1dd9ba4d50899d3095e37b20f9.png
[70 6]: /images/20220525/433c9f8f669f4aa3ac6a5006283b3657.png
[70 7]: /images/20220525/f0f6d49248b24f5e8f1292d066984df8.png
[70 8]: /images/20220525/1581d97f3f1b49f195f5593a0fe13c79.png
[70 9]: /images/20220525/029d0aa1abf34d8da5e59b0c86a43038.png
[70 10]: /images/20220525/b87d65b7e3b54fb8b2e611b16b7e66f6.png
[70 11]: /images/20220525/e4f32f4885114b4bab6fd5c9c55485d4.png
[ES6_--Iterator]: https://blog.csdn.net/tcy83/article/details/80343951