ECMAScript6中Promise对象的基本用法

Promise是处理异步代码的一种方法，避免了层层嵌套的回调函数，且支持链式操作。

Promise 对象代表一个异步操作，有三种状态：
pending: 初始状态，不是成功或失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。

一、Promise的创建

Promise的构造函数接收一个函数作为参数，该函数的两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数（可选）。
Promise 新建后就会立即执行（所以一般是包在一个函数中，有需要时才运行）。
then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行。

例子：

    var p = new Promise(function(resolve, reject){
        console.log('开始执行...');
        setTimeout(function(){
            console.log('执行某些操作...');
            resolve('传值，可以是字符串或对象')
        }, 2000);
    });
    p.then(function(data) {
       console.log('成功：', data);
    }, function(e) {
       console.log('失败：', data);
    });
    console.log('测试');

输出：

开始执行...
测试
执行某些操作...
成功： 传值，可以是字符串或对象

 

二、then方法

作用是为 Promise 实例添加状态改变时的回调函数，返回的一个新的Promise实例，可以采用链式写法。

例子：

    function f1(){
        var p = new Promise(function(resolve, reject){            
            setTimeout(function(){
                console.log('执行某些操作...');
                resolve('传值')
            }, 2000);
        });
        return p;
    }
    f1().then(function(data){
        console.log('成功1：', data);
        return f1();
    }).then(function(data){
        console.log('成功2：', data);        
    });

输出：

执行某些操作...
成功1： 传值
执行某些操作...
成功2： 传值

 

三、catch方法

是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

例子：

    function f1(){
        var p = new Promise(function(resolve, reject){            
            setTimeout(function(){
                console.log('执行某些操作...');
                reject('错误内容')
            }, 2000);
        });
        return p;
    }
    /*
    f1().then(null, function(e){
        console.log('错误：', e);
    });*/
    //结果和上面一样
    f1().catch(function(e){
        console.log('错误：', e);        
    });

输出：

执行某些操作...
错误： 错误内容

 

四、finally方法

finally方法的回调函数不接受任何参数，不管Promise 对象最后状态如何，都会执行的操作。
例子：

    function f1(){
        var p = new Promise(function(resolve, reject){            
            setTimeout(function(){
                console.log('执行某些操作...');
                resolve('传值')
            }, 2000);
        });
        return p;
    }
    f1().then(function(data){
        console.log('成功：', data);        
    }).finally(function(){
        console.log('finally');        
    });

输出：

执行某些操作...
成功： 传值
执行某些操作...
finally

 

五、all方法

将多个 Promise 实例，包装成一个新的 Promise 实例。
接受一个数组作为参数，在所有异步操作执行后执行回调。

例子：

    function f1(){
        var p = new Promise(function(resolve, reject){            
            setTimeout(function(){
                console.log('f1');
                resolve('f1传值')
            }, 3000);
        });
        return p;
    }
    function f2(){
        var p = new Promise(function(resolve, reject){            
            setTimeout(function(){
                console.log('f2');
                resolve('f2传值')
            }, 2000);
        });
        return p;
    }
    
    Promise.all([f1(), f2()])
    .then(function(arrs){
        for(i=0;i<arrs.length;i++){
            console.log(arrs[i]);
        }        
    });

输出：

f2
f1
f1传值
f2传值

 

六、race方法

和all方法相反，哪个先完成就执行哪个的回调。

例子：

    function f1(){
        var p = new Promise(function(resolve, reject){            
            setTimeout(function(){
                console.log('f1');
                resolve('f1传值')
            }, 3000);
        });
        return p;
    }
    function f2(){
        var p = new Promise(function(resolve, reject){            
            setTimeout(function(){
                console.log('f2');
                resolve('f2传值')
            }, 2000);
        });
        return p;
    }
    
    Promise.race([f1(), f2()])
    .then(function(data){        
        console.log(data);            
    });

输出：

f2
f2传值
f1

 

Promise 对象还有allSettled、any、resolve、reject、try等方法，略。

参考：https://es6.ruanyifeng.com/#docs/promise