【原】谈谈promise

    最近在看《你不知道的javascript中卷》，发觉做者花了基本一半的篇幅去讲异步和promise，以为有必要总结一下。

　其实本文的目的是想手写一个Promise的，无奈总结着总结着发觉篇幅有点长，所以只好一分为二，先介绍promise的用法，知道怎么用，咱们才知道怎么写，因此把手写一个promise的任务放到了下一篇文章当中。

　　固然，网上有不少关于promise的文章，均可以参考参考，有误之处，欢迎之处。

什么是Prmoise

　　promise是ES6新增的一个特征，它已被列入ES6的正式规范中

　　Promise对象能够理解为一次执行的异步操做，使用promise对象以后可使用一种链式调用的方式来组织代码；让代码更加的直观。也就是说，有了Promise对象，就能够将异步操做以同步的操做的流程表达出来，避免了层层嵌套的回调函数。

示例：未使用promise，回调必须层层嵌套

$.ajax(url1, function(data1){
    // do something...
    $.ajax(url2, function(data2){
        // do something...
        $.ajax(url3, function(data3){
            // do something...
            done(data3); // 返回数据
        })
    });
});

 若是有多个嵌套，致使代码不够直观，并且若是几个操做以前没有先后顺序之分，须要等待上一个操做完成才能够进行下一个操做，形成没必要要的等待

promise就是为了解决这些问题而产生的。

 

Promise对象的特色：

    一、对象的状态不受外界影响。

  Promise对象表明一个异步操做，有三种状态

• pending（执行中）
• Resolved（成功，又称Fulfilled）
• rejected（拒绝）

其中pending为初始状态，fulfilled和rejected为结束状态（结束状态表示promise的生命周期已结束）。

promise只有异步操做的结果，能够决定当前是哪种状态，任何其余操做都没法改变这个状态.。

   二、一旦状态改变，就不会再变，任什么时候候均可以获得这个结果。

 Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected

pending->fulfilled，pending->rejected。

只要这两种状况发生，状态就凝固了，不会再变了，会一直保持这个结果

 

Promise对象的缺点：

一、没法取消Promise，一旦新建它就会当即执行，没法中途取消。

二、若是不设置回调函数，Promise内部抛出的错误，不会反应到外部。

三、当处于Pending状态时，没法得知目前进展到哪个阶段（刚刚开始仍是即将完成）。

 

promise兼容性

除了IE这种古老的浏览器和一些低版本的安卓外，现代浏览器支持仍是挺好的，因此咱们能够在谷歌的控制台直接测试咱们的代码

Promise的使用

先提早说明一下，下面的代码示例，均可以复制到谷歌的控制台就行测试！！

 

一、基本用法：

（1）、首先咱们new一个Promise,将Promise实例化

（2）、而后在实例化的promise能够传两个参数，一个是成功以后的resolve，一个是失败以后的reject

（3）、Promise实例生成之后，能够用then方法分别指定Resolved状态和Reject状态的回调函数

代码以下：

var promise = function(isReady){
    return new Promise(function(resolve, reject){
        // do somthing, maybe async
        if (isReady){
          return resolve('hello world');
        } else {
          return reject('failure');
        }
    });
}
 
//Promise实例生成之后，能够用then方法分别指定Resolved状态和Reject状态的回调函数。
promise(true).then(function(value){
    // success,这里是resolve的回调函数
    console.log(value);  //hello world
}, function(err){
    // failure，这里是reject的回调函数
    console.log(err)
})

上述代码是执行成功，返回hello world,若是想测试一下失败后的返回值，能够在promise(true).then...这里改成 promise(false).then...便可 

 

二、链式操做

也许你会说，Promise只是简化层层回调的写法而已吧，其实否则，它的精髓是经过维护状态、传递状态的方式来使回调方式可以及时的调用，所以，相比于callback，它更灵活，更简单。下面咱们来看看Promise的链式操做：

makePromise1()
.then(function(value){
    console.log(value);
    return makePromise2();
})
.then(function(value){
    console.log(value);
    return makePromise3();
})
.then(function(value){
    console.log(value);
});

function makePromise1(){
    var p = new Promise(function(resolve, reject){
        //异步操做
        setTimeout(function(){
            console.log('异步任务1');
            resolve('异步任务1传过来的值');
        }, 2000);
    });
    return p;            
}
function makePromise2(){
    var p = new Promise(function(resolve, reject){
        //异步操做
        setTimeout(function(){
            console.log('异步任务2');
            resolve('异步任务2传过来的值');
        }, 2000);
    });
    return p;            
}
function makePromise3(){
    var p = new Promise(function(resolve, reject){
        //异步操做
        setTimeout(function(){
            console.log('异步任务3');
            resolve('异步任务3传过来的值');
        }, 2000);
    });
    return p;            
}

上面的代码中，咱们有三个异步操做，makePromise1,makePromise2,makePromise3。其中第二个和第三个依次执行，也就是上一个操做完成以后才能够进行。

输出的值为：

异步任务1
异步任务1传过来的值
异步任务2
异步任务2传过来的值
异步任务3
异步任务3传过来的值

 

三、Promise的catch方法

var promise = function(isReady){
    return new Promise(function(resolve, reject){
        // do somthing, maybe async
        if (isReady){
          return resolve('hello world');
        } else {
          return reject('failure');
        }
    });
}
promise(true)
.then(function(value){
    console.log('resolved');
    console.log(value);
    console.log(haha); //此处的haha未定义
})
.catch(function(error){
    console.log('rejected');
    console.log(error);
});

     catch 方法是 then(onFulfilled, onRejected) 方法当中 onRejected 函数的一个简单的写法，也就是说能够写成 then(fn).catch(fn),至关于 then(fn).then(null, fn)

     使用 catch 的写法比通常的写法更加清晰明确，其实能够类比成try/catch，这样，其中有报错的地方不会阻塞运行。好比定义了一个未定义haha,正常来讲它上面的代码也不会运行，由于被这个报错阻塞了，有了catch,它上面的代码能够正常运行下去：

控制台打印出来的东西：

resolved
hello world
rejected
ReferenceError: haha is not defined(…)

 

四、promise.all方法

  Promise.all 能够接收一个元素为 Promise 对象的数组做为参数，当这个数组里面全部的 Promise 对象都变为 resolve 时，该方法才会返回。

代码示例：

var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("第一个promise");
    }, 3000);
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("第二个promise");
    }, 1000);
});

Promise.all([p1, p2]).then(function (result) {
    console.log(result); // ["第一个promise", "第二个promise"]
});

     上面的代码中，all接收一个数组做为参数，p1,p2是并行执行的，等两个都执行完了，才会进入到then，all会把全部的结果放到一个数组中返回，因此咱们打印出咱们的结果为一个数组。

　　值得注意的是，虽然p2的执行顺序比p1快，可是all会按照参数里面的数组顺序来返回结果。all的使用场景相似于，玩游戏的时候，须要提早将游戏须要的资源提早准备好，才进行页面的初始化。

 

五、promise.race方法

      race的中文意思为赛跑，也就是说，看谁跑的快，跑的快的就赢了。所以，promise.race也是传入一个数组，可是与promise.all不一样的是，race只返回跑的快的值，也就是说result返回比较快执行的那个。

var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        console.log(1);
        resolve("第一个promise");
    }, 3000);
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        console.log(2);
        resolve("第二个promise");
    }, 1000);
});

Promise.race([p1, p2]).then(function (result) {
    console.log(result); 
});

// 结果：
// 2
// 第二个promise
// 1

能够看到，传的值中，只有p2的返回了，可是p1没有中止，依然有执行。

race的应用场景为，好比咱们能够设置为网路请求超时。写两个promise，若是在必定的时间内若是成功的那个咱们没有执行到，咱们就执行失败的那个，这里再也不举例子，能够看看阮一峰的ES入门。

 

ES6的介绍就到这里了，下一篇文章咱们来手写一个promise