浅谈JS异步编程——Promise

JS单线程的特点同时也决定了JS中异步编程的必要性，起初，我们常常使用回调函数来处理异步任务，但随着任务越来越复杂，回调函数的层层嵌套使得无论是代码还是开发人员看起来都十分痛苦。。。

于是，可爱的Promise出现了，将开发人员从万恶的回调地狱中解救了出来。。。

一.什么是Promise

• Promise是一个对象，从他可以获取异步操作的消息
• Promise对象是一个构造函数，用来生成Promise实例
• Promise对象代表一个异步任务，有三种状态：Pending、Resolved和Rejected
• Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。
• Promise对象的状态一旦改变，状态就凝固了，不会再变了，会一直保持这个结果。

二.Promise怎么用

上代码：

var task = new Promise(function(resolve,reject){
       console.log("begin:" + new Date());
       setTimeout(function(){
         resolve(new Date());
       },3000)
});

task.then(function(value){
    console.log("resolve:" + value);
}).catch(function(err){
   console.log(err);
})

console.log("hello!");

/*输出：
begin:Sun Apr 02 2017 14:20:28 GMT+0800 (CST)
hello!
resolve:Sun Apr 02 2017 14:20:31 GMT+0800 (CST)
*/

上面就是Promise处理异步任务的一个很简单的小例子，Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。

当异步操作成功后，我们调用resolve函数，将Promise的状态变为Resolved(成功)，并将异步任务的结果作为参数传递出去。
当异步操作失败后，我们调用reject函数，将Promise的状态变为Rejected(失败)，并将异步操作报出的错误作为参数传递出去。

Promise新建时，异步任务便开始执行。
Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

三.Promise实际应用大招

1.链式调用
还记得我们一开始说到的Promise能帮我们摆脱回调地狱吗？从上一个例子并没有看出来，我们来看下面这个例子：

var task = new Promise(function(resolve,reject){
    console.log("begin:" + new Date());
    setTimeout(function(){
        resolve(1);
    },3000)
});

task.then(function(value){
    console.log(value+"resolve:" + new Date());
    return value+1;
}).then(function (value) {
    console.log(value+"resolve:" + new Date());
    return value+1;
}).then(function (value) {
    console.log(value+"resolve:" + new Date());
}).catch(function (err) {
    console.log(err);
});

/*输出：
begin:Sun Apr 02 2017 14:58:11 GMT+0800 (CST)
1resolve:Sun Apr 02 2017 14:58:14 GMT+0800 (CST)
2resolve:Sun Apr 02 2017 14:58:14 GMT+0800 (CST)
3resolve:Sun Apr 02 2017 14:58:14 GMT+0800 (CST)
*/

Promise采用链式调用then方法处理嵌套回调，时代码变的十分简洁清晰。

为什么他可以采用链式调用呢？
我们可以联想JQuery中链式调用的处理，在这里也是一样，then方法返回的是一个新的Promise实例，前一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

2.并行执行异步操作
如果我们的异步操作都是相互独立的，那么为了提高性能，我们就可以让他们并行执行。

Promise中并行执行有两个方法：Promise.all()和Promise.race()。

他们的相同之处在于：
他们都是接受一个Promise实例数组作为参数，返回一个包装后的Promise实例。

他们的不同之处在于：
Promise.all()是要等所有异步任务都执行完以后才执行回调，所有异步操作的结果会被放进一个数组中传给then。
Promise.race()中哪个实例率先改变状态，新Promise的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给新Promise的回调函数。需要注意的是，这时其他几个异步任务并没有停止执行。

下面上代码：

var task1=new Promise(function(resolve,reject){
    console.log("task1 begin:"+new Date());
      setTimeout(function(){
          resolve("task1:"+new Date());
          console.log("task1 done "+new Date())

      },3000)
});
var task2=new Promise(function(resolve,reject){
    console.log("task2 begin:"+new Date());
    setTimeout(function(){
        resolve("task2:"+new Date());
        console.log("task2 done "+new Date())
    },2000)
});

var task3=new Promise(function(resolve,reject){
    console.log("task3 begin:"+new Date());
    setTimeout(function(){
        resolve("task3:"+new Date());
        console.log("task3 done "+new Date());

    },1000)
});
Promise.race([task1,task2,task3]).then(function (value) {
    console.log("resolve："+value);
}).catch(function (err) {
    console.log(err)
});

/*输出：
task1 begin:Sun Apr 02 2017 15:49:54 GMT+0800 (CST)
task2 begin:Sun Apr 02 2017 15:49:54 GMT+0800 (CST)
task3 begin:Sun Apr 02 2017 15:49:54 GMT+0800 (CST)
task3 done Sun Apr 02 2017 15:49:55 GMT+0800 (CST)
resolve：task3:Sun Apr 02 2017 15:49:55 GMT+0800 (CST)
task2 done Sun Apr 02 2017 15:49:56 GMT+0800 (CST)
task1 done Sun Apr 02 2017 15:49:57 GMT+0800 (CST)

*/

//将Promise.race()改为Promise.all()后的输出：
task1 begin:Sun Apr 02 2017 15:51:42 GMT+0800 (CST)
task2 begin:Sun Apr 02 2017 15:51:42 GMT+0800 (CST)
task3 begin:Sun Apr 02 2017 15:51:42 GMT+0800 (CST)
task3 done Sun Apr 02 2017 15:51:43 GMT+0800 (CST)
task2 done Sun Apr 02 2017 15:51:44 GMT+0800 (CST)
task1 done Sun Apr 02 2017 15:51:45 GMT+0800 (CST)
resolve：task1:Sun Apr 02 2017 15:51:45 GMT+0800 (CST),task2:Sun Apr 02 2017 15:51:44 GMT+0800 (CST),task3:Sun Apr 02 2017 15:51:43 GMT+0800 (CST)

四.Promise异常处理

1.用reject()函数处理异常

var task=new Promise(function(resolve,reject){
       reject(err);
})
task.then(function(){
    ```
},function(err){
   console.log(err);
})

then方法的第二个参数是用来对异步任务失败情况做处理的，但时一般情况下，我们不使用这个方法，而是使用下面这个方法。

2.使用catch方法处理异常

var task=new Promise(function(resolve,reject){
       reject(err);
})
task.then(function(){
    ```
}).then(function(){
    ```
}).catch(function(err){
   console.log(err);
})

上面代码中，catch方法同样能够捕获到异步任务失败的消息，并能接受到他的错误参数进行处理。

除此之外，在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。就类似于同步的写法中的try/catch。

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

五.其他方法

done()——处于回调链的尾端，保证向全局抛出任何可能出现的错误。
finally()——用于指定不管Promise对象最后状态如何，都会执行的操作。接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。
Promise.resolve() ——将现有对象转为Promise对象。
Promise.reject() ——返回一个新的 Promise 实例，该实例的状态为rejected。

参考：http://es6.ruanyifeng.com/#docs/promise#Promise-reject