ES6 - Promises异步

Promise 是在JavaScript(ES6的新函数)中实现异步编程的一种方法，让无涯教程从使用回调了解异步编程及其实现开始。

同步回调

一个函数可以作为参数传递给另一个函数，该机制称为回调。以下示例将更好地理解此概念。

无涯教程网

<script>   
   function notifyAll(fnSms, fnEmail) {   
      console.log('starting notification process');   
      fnSms();   
      fnEmail();   
   }   
   notifyAll(function() {   
      console.log("Sms send ..");   
   }, 
   function() {   
      console.log("email send ..");   
   });   
   console.log("End of script"); 
   //executes last or blocked by other methods   
</script> 

在上面显示的 notifyAll()方法中，通过发送SMS和发送电子邮件来进行通知，因此，notifyAll方法的调用者必须传递两个函数作为参数。

成功执行上述代码后，将显示以下输出。

starting notification process 
Sms send .. 
Email send .. 
End of script 

在上述代码中，函数调用是同步的，这意味着UI线程将等待完成整个通知过程，现在一起了解非阻塞或异步调用。

异步回调

考虑上面的示例，无涯教程将使用JavaScript的 setTimeout()方法，默认情况下，此方法是异步的。

setTimeout()方法采用两个参数-

• 回调函数。

• 指定秒后执行回调函数。

示例中两秒后执行notifyAll，因此，notifyAll过程不会阻止JavaScript主线程。

<script>   
   function notifyAll(fnSms, fnEmail) {   
      setTimeout(function() {   
         console.log('starting notification process');   
         fnSms();   
         fnEmail();   
      }, 2000);   
   }   
   notifyAll(function() {   
      console.log("Sms send ..");   
   },  
   function() {   
      console.log("email send ..");   
   });   
   console.log("End of script"); //executes first or not blocked by others   
</script>

成功执行上述代码后，将显示以下输出。

End of script 
starting notification process 
Sms send .. 
Email send .. 

在有多个回调的情况下，代码看起来很吓人。

<script>   
   setTimeout(function() {   
      console.log("one");   
      setTimeout(function() {   
         console.log("two");   
         setTimeout(function() {   
            console.log("three");   
         }, 1000);   
      }, 1000);   
   }, 1000);   
</script>

通过引入Promise的概念，ES6可以助您一臂之力。Promise可以帮助您以更加简洁的代码执行多个异步操作。

Promise回调

让无涯教程通过一个示例来理解这一点。以下是相同的语法。

var promise=new Promise(function(resolve , reject) {    
   //do a thing, possibly async , then..  
   if(/*everthing turned out fine */)    resolve("stuff worked");  
   else     
   reject(Error("It broke"));  
});  
return promise;
//Give this to someone

实现Promise的第一步是创建一种使用Promise的方法。此示例中， getSum()方法是异步的，即其操作不应阻止其他方法的执行。

以下示例(第1步)将Promise对象声明为" var promise"，Promise通过使用resolve回调并传递输出(即n1 + n2)来返回计算输出

第1步   -  resolve(n1 + n2);

    如果getSum()遇到错误或意外情况，它将调用Promise中的reject回调方法，并将错误信息传递给调用方。

第2步  -  reject(Error("Negatives not supported"))；

    下面的代码(第1步)给出了该方法的实现。

function getSum(n1, n2) {   
   varisAnyNegative=function() {   
      return n1 < 0 || n2 < 0;   
   }   
   var promise=new Promise(function(resolve, reject) {   
      if (isAnyNegative()) {   
         reject(Error("Negatives not supported"));   
      }   
      resolve(n1 + n2)
   });   
   return promise;   
} 

调用者应使用" then"方法，该方法需要两种回调方法-第一种用于成功，第二种用于失败，每种方法都有一个参数，如下面的代码所示。

getSum(5, 6)   
.then(function (result) {   
   console.log(result);   
},   
function (error) {   
   console.log(error);   
});

成功执行上述代码后，将显示以下输出。

11 

由于getSum()的返回类型是Promise，因此实际上可以有多个" then"语句。第一个" then"将具有return语句。

getSum(5, 6)   
.then(function(result) {   
   console.log(result);   
   return getSum(10, 20); 
   //this returns another promise   
},   
function(error) {   
   console.log(error);   
})   
.then(function(result) {   
   console.log(result);   
}, 
function(error) {   
   console.log(error);
});    

成功执行上述代码后，将显示以下输出。

11
30

下面的示例使用getSum()方法发出三个then调用。

<script>   
   function getSum(n1, n2) {   
      varisAnyNegative=function() {   
         return n1 < 0 || n2 < 0;   
      }   
      var promise=new Promise(function(resolve, reject) {   
         if (isAnyNegative()) {   
            reject(Error("Negatives not supported"));   
         }   
         resolve(n1 + n2);   
      });   
      return promise;   
   }   
   getSum(5, 6)   
   .then(function(result) {   
      console.log(result);   
      return getSum(10, 20); 
      //这会返回另一个 Promise
   },   
   function(error) {   
      console.log(error);   
   })
   .then(function(result) {   
      console.log(result);   
      return getSum(30, 40); 
      //这会返回另一个 Promise
   }, 
   function(error) {   
      console.log(error);   
   })   
   .then(function(result) {   
      console.log(result);   
   }, 
   function(error) {         
      console.log(error);   
   });   
   console.log("End of script ");   
</script> 

成功执行上述代码后，将显示以下输出。

该程序首先显示"End of script"，然后依次显示调用getSum()方法的输出。

End of script  
11 
30 
70