ES6的promise对象应该这样用

Posted 2020-08-19 Tech 侠

     ES6修补了一位Js修真者诸多的遗憾。

     曾几何时，我这个小白从js非阻塞特性的坑中爬出来，当我经历了一些回调丑陋的写法和优化的尝试之后，我深深觉得js对于多线程阻塞式的开发语言而言，可能有着其太明显的缺点，而又无法忽略的是也正因为这一点，node.js处理并行的能力被人看作优点，在我看来，这其实有着些讽刺的意味，就好像踢足球时有的人总夸你腿短，所以频率快下盘稳好控球。。。好在js从出生以来就有一种独特的特质，就是模仿，对，就是模仿，模仿别人的优点来补足自己，同时保持自己的长处。

     ES6就是通过Promise对象模仿出了异步处理更合理的处理方式。鼓掌！“啪啪啪。。。”

     废话扯到这里，我们来看如何通过promise对象处理异步操作。

什么是Promise原型对象?

      ES6 原生提供了 Promise原型 对象，用来传递异步操作的消息。让异步操作（通常是异步操作）事件队列之间知道彼此相邻的执行先后顺序。这样说，我相信初次接触的人会不太理解，没事，我提供一个清晰的实例来讲解。

基本的promise基础知识，你需要到 http://www.jianshu.com/p/063f7e490e9a 学习相关内容。

Promise怎么用实现异步？

     让我们来看这个例子：

new Promise(
      function(resolve,reject){
          resolve();      //这里指调用后面then的方法体内容,即先执行2000ms的动作
      }
  ).then(function() {
          new Promise(function (resolve, reject) {
              setTimeout(function () {
                  alert("先执行2000ms动作！");
                  resolve();     //这里指调用后面then的方法体内容，执行1000ms的动作
              }, 2000);
          }).then(function () {
                  setTimeout(function () {
                      alert("再执行1000ms动作！");
                  }, 1000);
              });
      });

　　这段代码会先执行2000ms动作，再执行1000ms动作。

      一个Promise实例对象会有三个状态，Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。其构造函数的参数为一个带有两个状态的参数的匿名函数，这两个状态在这儿指代将要执行的函数行为。

      你需要注意的是，一个promise对象只能指派一个固定的函数行为，即resolve与reject指代一个固定的函数行为，即后面紧接着的then或err的函数内容。如果你想接着进行下一步异步操作，你需要在相应函数体内再兴建一个新的promise对象，并规定它对应状态的函数行为。这里往往是别的教程没有说清的地方。

我们再来探究一下如何用优化调用的写法?

    如果Promise只是实现这样层层嵌入的模样，我并不觉得它对层层回调有多大的优化的地方。我们思考如何用简洁直观的链式调用形式来使用Promise对象。

我们知道Promise对象的then()方法会返回给下一个then()一个参数，如果我们让这个参数为新的Promise实例对象的话，不就能实现链式调用不同的Promise对象规定的resolve行为了吗？想到如此，迫不及待做尝试，看下面的代码:

new Promise(function(resolve,reject){
    setTimeout(function(){
        alert("执行3000ms的动作！");    //3000ms动作
        resolve();
    },3000);

   }).then(function(){
     return  new Promise(function(resolve,reject){
         setTimeout(function(){
             alert("执行2000ms的动作！");     //2000ms动作
             resolve();
         },2000);
     });

    }).then( function(){
        alert("执行0ms的动作!");      //0ms动作
    });

　　 这段代码会先执行3000ms动作，在执行2000ms动作，最后执行0ms动作！我们成功地实现了Promise对象的链式调用解决了异步操作的问题！此处应该再一次响起掌声“啪啪啪。。。”;