ES6的promise的学习

Posted 老张家阿妞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的学习的主要内容,如果未能解决你的问题,请参考以下文章

ES6学习—Promise对象 超鸡重要

ES6的promise的学习

Promise学习

es6学习笔记--promise对象

通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

ES6学习笔记--promise对象