Promise粗解

Posted 2020-09-12

一、Promise含义、作用、特点

Promise含义

• 异步编程的一种解决方案；
• 简单来说就是一个容器，里面保存这某个未来才会结束的事件(异步操作)的结果；
• 从语法上来讲，是一个对象，可以获取异步操作的消息；

Promise作用

• 可避免回调金字塔式的代码；
• 优化异步流程；
• 得到异步流程中的错误；

Promise对象的特点

对象的状态不受外界影响

• Promise对象代表一个异步操作，用三种状态：pending(进行中)、resolve(已完成)、reject(已失败)，只有异步操作的结果，可以决定当前是那种状态，任何其他操作都无法改变这个状态；

一旦状态改变，就不会再变，任何事情都可以得到这个结果；

• Promise对象的状态改变只有两种可能，从pending到resolve和pending到reject；

二、基本用法

• ES6规定，Promise对象是一个构造函数，用来生成Promise实例

生成Promise实例

let promise = new Promise(function(resolve,reject){
        //do something
        if(异步操作成功){
                resolve(value);
        }else{
                reject(error);
        }
});

• Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject，两个参数也是函数，由javascript引擎提供，不用自己部署；
• resolve函数的作用是将Promise对象的状态从pending变成resolve，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
• reject函数的作用是将Promise对象的状态从pending变成reject，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去；

then方法

• Promise实例生成后，可以用then方法分别指定resolve状态和reject状态的回调函数

promise.then(function(value){
        //success
},function(error){
        //failed
});

• then方法可以接受两个回调作为参数，第一个回调函数是Promise对象的状态变为resolve时调动，第二个则是转变为reject时调用，第二个函数可选；
• then方法返回的是一个新的Promise实例(不是原来的Promise实例)，因此可以采用链式写法，即then方法后面再调用另一个then方法；

catch方法

• catch方法是.then(null,reject)的别名，用于指定发生错误时的回调函数；

Promise.all()方法

• Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例；
• 用于多个Promise实例一起运行，都运行完毕返回结果；

Promise.race()方法

• Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例。
• 用于多个Promise实例一起运行，只要有一个运行完毕就返回结果；

Promise.resolve()

• 有时需要将现有对象转为Promise对象，Promise.resolve方法就起到这个作用；

Promise.reject()

• Promise.reject(resson)方法也会返回一个新的Promise实例，该实例的状态为reject；

done()

• Promise对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为Promise内部的错误不会冒泡到全局）。因此，我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。

finally()

• finally方法用于指定不管Promise对象最后状态如何，都会执行的操作。它与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。

三、代码实例

多个异步操作，相互之间传递数据

let add1 = function (value) {
    return new Promise(function(resolve,reject){
        setTimeout(resolve(value + 1),1000)
    });
};

let add2 = function (value) {
    return new Promise(function(resolve,reject){
        setTimeout(resolve(value + 2),1000)
    });
};

let add3 = function (value) {
    return new Promise(function(resolve,reject){
        setTimeout(resolve(value + 3),1000)
    });
};

let add4 = function (value) {
    return new Promise(function(resolve,reject){
        setTimeout(resolve(value + 4),1000)
    });
};

add1(0)
    .then(function (value) {
        console.log(value);
        return add2(value);
    })
    .then(function (value) {
        console.log(value);
        return add3(value);
    })
    .then(function (value) {
        console.log(value);
        return add4(value);
    })
    .then(function (value) {
        console.log(value);
    })
    .catch(function (error) {
        console.log(error);
    })
------
1
3
6
10

• 多个异步操作，每个异步操作都需要上一个一步操作的结果，保证每个异步操作都返回一个Promise对象；
• then方法之后，也要用return传递异步操作的结果；

all()方法和race()方法

• 大家一起走，全部到达终点就吃饭；

Promise.all([add1(0),add2(0),add3(0),add4(0)])
    .then(function (value) {
        console.log(value);
    })
    .catch(function (error) {
        console.log(error);
    });
------
[ 1, 2, 3, 4 ]

• 大家一起走，只要一个人到达终点，就开始吃饭；

Promise.race([add1(0),add2(0),add3(0),add4(0)])
    .then(function (value) {
        console.log(value);
    })
    .catch(function (error) {
        console.log(error);
    });
------
1

待续...