ES6的promise的学习

Posted 2020-07-22 老张家阿妞

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