在 JS中使用promise

一、promise 基本概念

CommonJS 与ES2015均支持promise 规范。该规范支持采用异步的方式执行代码，代码执行完成后有resolve与reject两种执行状态，其中resolve表示代码执行成功，reject表示代码执行失败。promise 执行规范如图示意：

一、使用promise

1、定义一个promise变量

//===============创建promise对象，该对象实际为一个可运行函数，在函数中设置运行状态为失败====
p=new Promise((resolve, reject) => {       
       if (aggreed)
            resolve('ok');
       else
            resolve('failed');
    })

2、将promise投入运行

//===============then 对应promise执行成功，即：执行状态为resolve;catch为reject执行状体的回调===
p(true).then(function(data){
console.log("执行正确");
}).catch(function(data){
console.log("执行失败");
})

3、链式执行promise

实际编程中，我们常常需要按照一定流程执行若干函数，比如编程实现做饭、吃饭、洗碗等一系列流程时，按照步骤：第一步做饭，成功完成了做饭就启动吃饭，吃饭完成后洗碗，采用promise表达的过程如下示意：

//===========做饭==============
function cook(){
    console.log('开始做饭。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('做饭完毕！');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}
 
//===========吃饭=============================
function eat(data){
    console.log('开始吃饭：' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('吃饭完毕!');
            resolve('一块碗和一双筷子');
        }, 2000);
    });
    return p;
}
 
cook()
.then(function(data){
//===============通过抛出异常的方式将cook的状态设置为reject================
    throw new Error('米饭被打翻了！');
    eat(data);
})
.catch(function(data){
    //=============捕获reject状态后的异常信息==============
    console.log(data);
});

输出信息为：

4、并行执行多个方法

Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调

//切菜
function cutUp(){
    console.log('开始切菜。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('切菜完毕！');
            resolve('切好的菜');
        }, 1000);
    });
    return p;
}
 
//烧水
function boil(){
    console.log('开始烧水。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('烧水完毕！');
            resolve('烧好的水');
        }, 1000);
    });
    return p;
}

Promise
.all([cutUp(), boil()])
.then(function(results){
    console.log("准备工作完毕：");
    console.log(results);
});

5、Race执行方法

race 的用法与 all 一样，只不过 all 是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。

注意：其它没有执行完毕的异步操作仍然会继续执行，而不是停止。

//===========将上面的例子更改为race执行，则任意函数执行完成后，都执行回调方法=========
Promise
.race([cutUp(), boil()])
.then(function(results){
    console.log("准备工作完毕：");
    console.log(results);
});