ES6的promise的学习

1.Promise的含义：

Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

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

2.Promise的基本实现

var promiseCount=0;

function testPromise(){

    var thisPromiseCount = ++promiseCount;

    var p=new Promise(function(resolve, reject){

        //resolve成功  reject失败

        setTimeout(function(){

            if(thisPromiseCount<2){

                resolve(thisPromiseCount);

            }else{

                reject(thisPromiseCount)

            }

        },Math.random()*2000+1000);

    });

    p.then(function(val){

        console.log("end: "+val+" Promise被满足了(异步代码结束)");

        return 'success';

    },function(error){

        console.error('error:'+error+"Promise失败(异步代码结束)");

        return 'error'

    }).then(function(val){

        console.log(val);

    })

  }

  testPromise();

上面是一个简单的Promise的基本实现。Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。resolve表示成功后执行的方法，reject是失败后执行的方法；new Promise会生成一实例，实例生成后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。then有两个回调函数，第一个是成功后的回调，第二个是失败后的回调。

3. Promise.prototype.then

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。第一个参数是resolved的回调函数，第二个是可选的，rejected回调函数

var getJSON = function(url) {

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

        var client = new XMLHttpRequest();

        client.open("GET", url);

        client.onreadystatechange = handler;

        client.responseType = "json";

        client.setRequestHeader("Accept", "application/json");

        client.send();

        function handler() {

            if (this.readyState !== 4) {

                return;

            }

            if (this.status === 200) {

                resolve(this.response);

            } else {

                reject(new Error(this.statusText));

            }

        };

    });

    return promise;

};

getJSON("/post/1.json").then(function(post) {

    return getJSON(post.commentURL);

}).then(function funcA(comments) {

    console.log("Resolved: ", comments);

}, function funcB(err){

    console.log("Rejected: ", err);

});

上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

4. Promise.prototype.all

Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。
数组或者可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例。
（1）只有proList的状态都变成fulfilled，p的状态才会变成fulfilled，此时proList的返回值组成一个数组，传递给p的回调函数。
（2）只要proList之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

ar arr=[1,2,3];

function getPro(a){

    return new Promise(function(resolve,reject){

        if(a>2){

            reject(a);

        }

        resolve(a)

    })

}

var proList=arr.map(function(id){

    return getPro(id);

});

Promise.all(proList).then(function(val){

    console.log(val);

}).catch(function(e){

    console.log('error:'+e);

});

上面的例子是一个简单的promise.all的实现，prolist里面的三个promise实例，如果三个都返回resolve，那么就会走第一个then里面的方法，如果有一个返回reject，那么久会走到最后的catch方法；

4.Promise.prototype.race

Promise.race(),参数跟Promise.all参数一样，
下面例子只要p1、p2之中有一个实例率先改变状态，p3的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p3的回调函数。p3的回调是看率先改变状态p1或者p2的promise里面的函数resolve还是reject，
如果率先改变状态的promise是reject，那么就会走catch回调，反之会走then的第一个回调方法；

var p1=new Promise(function(resolve,reject){

    setTimeout(function(){

        console.log(p1);

        resolve('p1:=>success');

    },Math.random()*1000)

});

var p2=new Promise(function(resolve,reject){

    setTimeout(function(){

        console.log(p2);

        reject('p2:=>error');

    },Math.random()*1000)

});

var p3=Promise.race([p1,p2]).then(function(data){

    console.log(p3);

    console.log(data);

}).catch(function(error){

    console.log(p3);

    console.log(error);

});

5.Promise.prototype.catch

catch捕获错误会捕获所有catch上面的所有then方法里面的错误；

/**

 * 由于没有指定使用try...catch语句，就冒泡到最外层，成了未捕获的错误。用catch捕获不了，这个错误是在Promise函数体外抛出的。

 * @type {Promise}

 */

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

    resolve("ok");

    setTimeout(function () {

        throw new Error('test')

    }, 0)

});

promise.then(function (value) {

    console.log(value)

}).catch(function (e) {

    console.log(e);

});

/**

 * 需要注意的是，catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。

 * @returns {Promise}

 */

var someAsyncThing = function () {

    return new Promise(function (resolve, reject) {

        // 下面一行会报错，因为x没有声明

        resolve(x + 2);

    });

};

someAsyncThing()

.catch(function (error) {

        console.log('oh no', error);

})

.then(function () {

        console.log('carry on');

});

6.Promise.prototype.resolve和Promis.prototype.reject;

有时需要将现有对象转为Promise对象，Promise.resolve方法就起到这个作用， Promise.resolve()有以下三种使用情节，promise.reject跟promise.resolve使用方法一样；

/**

 *例如下面p1等价于p2

 * @type {Promise.<string>}

 */

var p1=Promise.resolve('foo');

var p2=new Promise(function(resolve,reject){

    resolve('foo');

});

p1.then(function(data){

    console.log(data); //foo

});

/**

 *没有参数的时候，回掉函数也没有参数

 * @type {Promise.<string>}

 */

var p3=Promise.resolve();

p3.then(function(){

    console.log('resolve无参数!');

});

/**

 *  当一个对象有then这个参数的时候；

 * @type {Promise.<string>}

 */

var enable={

    then:function(resolve,reject){

        resolve(50);

    }

};

var p4=Promise.resolve(enable);

p4.then(function(s){

    console.log(s);

});

参考网址：http://es6.ruanyifeng.com/#docs/promise

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

巴特西

ES6的promise的学习

最新文章

热门文章