浅谈Promise

Promise作为ES6中最重要的特性之一，我们有必要掌握。那Promise到底是什么呢，让我们打印出来看一下：

可以看出，Promise是一个构造函数，自己身上有all、race、reject、resolve等方法，原型上有then、catch等方法。让我们来创建一个Promise对象：

var p = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后，调用resolve 或 reject
})

Promise的构造函数接收一个参数，是一个回调函数(在回调中执行一些操作，例如异步），并且给这个函数传入两个参数：resolve（解析），reject（拒绝），分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。

var p = new Promise(function(resolve, reject){
    //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
    //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法
    setTimeout(function(){
        resolve("成功!")
    }, 1000)
})
 
p.then(function(data){
    //data的值是上面调用resolve(...)方法传入的值
    //data参数不一定非要是字符串类型，这里只是举个例子
    console.log(data)
})

Promise 对象有以下两个特点:

1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

• pending: 初始状态，不是成功或失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise 优缺点：

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消，所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

//将Promise对象包在函数中
function getP(msg){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log(msg)
            resolve('成功')
        }, 1000)
    })
    return p            
}
getP('Promise')

Promise.prototype.then方法：链式操作

从表面上看，Promise只是解决了回调地狱的问题，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用。

Promise.prototype.then 方法返回的是一个新的 Promise 对象，因此可以采用链式写法。

getP('Promise1').then(function(data){
    console.log(data)
    return getP('Promise2')
}).then(function(data) {
    console.log(data)
    return getP('Promise3')
}).then(function(data){
     console.log(data)
})

这样能够按顺序，每隔1秒输出每个异步回调中的内容，运行结果如下：

在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了，比如我们把上面的代码修改成这样：

getP('Promise1').then(function(data){
    console.log(data)
    return getP('Promise2')
}).then(function(data) {
    console.log(data)
    return '数据'
}).then(function(data){
     console.log(data)
})

结果如下：

Promise.prototype.catch方法：捕捉错误

Promise.prototype.catch 方法是 Promise.prototype.then(null, rejection) 的别名，它和then的第二个参数一样，用于指定发生错误时的回调函数。

getP("Promise").then(function(data) {
   console.log(data)
  // some code
}).catch(function(error) {
  // 处理前一个回调函数运行时发生的错误
  console.log(error)
})

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

getP("Promise1").then(function(data) {
    console.log(data)
    return getP('Promise2')

}).then(function(data) { 
    console.log(data)
    // some code 
}).catch(function(error) { 
    // 处理前两个回调函数的错误 
})

也就是说当代码出错时并不会报错卡死，而是会进到catch方法里面去，而且把错误原因传到了error参数中，这与我们的try/catch语句有相同的功能。

Promise.all方法

Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。    

var p = Promise.all([p1,p2,p3])

上面代码中，Promise.all 方法接受一个数组作为参数，p1、p2、p3 都是 Promise 对象的实例。（Promise.all 方法的参数不一定是数组，但是必须具有 iterator 接口，且返回的每个成员都是 Promise 实例。）

p 的状态由 p1、p2、p3 决定，分成两种情况。

• 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
• 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

var p1 = getP('Promise1')
var p2 = getP('Promise2')
var p3 = getP('Promise3')
Promise.all([p1,p2,p3])
.then(function(results){
    console.log(results)
})

Promise.race方法

all方法的效果实际上是：谁跑的慢，就以谁为准执行回调，那么相对的就有另一个方法：谁跑的快，以谁为准执行回调

Promise.race 方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

var p = Promise.race([p1,p2,p3])

上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的返回值。