JavaScript中的Promise使用详解

熟悉前端开发的都一定写过回调方法（callback），简单的说，回调方法是一个函数被作为参数传递给另一个函数，比如下面的代码 

   

    

     

      

     
     

      

       function say (value) {
      
     
    

     

      

     
     

      

           alert(value);
      
     
    

     

      

     
     

      

       }
      
     
    

     

      

     
     

      

       function execute (someFunction, value) {
      
     
    

     

      

     
     

      

           someFunction(value);
      
     
    

     

      

     
     

      

       }
      
     
    

     

      

     
     

      

       execute(say, 'hello word');
      
     
   
  

say函数作为参数传递给execute函数，一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称——地狱回调。

那么如何解决地狱回调，保持我们的代码简短，这时Promise就出场了，Promise对象可以理解为一次执行的异步操作，使用Promise对象之后可以使用一种链式调用的方式来组织代码；让代码更加的直观。我们用Promise对象改造上面的代码

   

    

     

      

     
     

      

       function say(value) {
      
     
    

     

      

     
     

      

           return new Promise(function(resolve, reject) {
      
     
    

     

      

     
     

      

               resolve(value)
      
     
    

     

      

     
     

      

           })
      
     
    

     

      

     
     

      

       }
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       function execute(value) {
      
     
    

     

      

     
     

      

           return new Promise(function(resolve, reject) {
      
     
    

     

      

     
     

      

               resolve(value)
      
     
    

     

      

     
     

      

           })
      
     
    

     

      

     
     

      

       }
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       execute('hello word').then((value)=>{
      
     
    

     

      

     
     

      

           say(value).then((sayValue)=>{   
      
     
    

     

      

     
     

      

               alert(sayValue)
      
     
    

     

      

     
     

      

           })
      
     
    

     

      

     
     

      

       })
      
     
   
  

   
  
  

上面代码只是根据第一段代码做的演示，代码量增加了，但是比传统的解决方案更合理和更强大。

Promise正如字面意思-承诺，“承诺将来会执行”约定的事情。我们首先需要了解Promise的三种状态：

• pending: 初始状态，既不是成功，也不是失败状态。

• fulfilled: 意味着操作成功完成。

• rejected: 意味着操作失败。

先来构造下一个Promise实例

   

    

     

      

     
     

      

       const promise = new Promise(function(resolve, reject) {
      
     
    

     

      

     
     

      

         // … some code
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

         If (/* 异步操作成功 */){
      
     
    

     

      

     
     

      

           resolve(value);
      
     
    

     

      

     
     

      

         } else {
      
     
    

     

      

     
     

      

           reject(error);
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

       });
      
     
   
  

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数。

Resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

Reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

还是拿第二段代码演示，讲下运行过程，首先是这段代码

   

    

     

      

     
     

      

       execute('hello word').then((value)=>{
      
     
    

     

      

     
     

      

           say(value).then((sayValue)=>{   
      
     
    

     

      

     
     

      

               alert(sayValue)
      
     
    

     

      

     
     

      

           })
      
     
    

     

      

     
     

      

       })
      
     
   
  

首先是调用execute方法，传入‘hello word’，这个execute方法返回promise对象。调用用then方法接收值，再调用say方法，传入execute方法返回的值，再调用then方法接收，最后alert。

暂时就写到这，后期在更新。