js promise then 用法详解

Promise 是抽象的异步处理对象

构造方法：

let promies = new Promise((resolve, reject) => {
 resolve(); //异步处理 
});

Promise 有三个状态：

1. Fulfilled: has-resolved, 表示成功解决，这时会调用 onFulfilled.
2. Rejected: has-rejected, 表示解决失败，此时会调用 onRejected.
3. Pending: unresolve, 表示待解决，既不是resolve也不是reject的状态。也就是promise对象刚被创建后的初始化状态.

上面我们提到 Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject.

resolve函数的作用是，将 Promise 对象的状态从 未处理 变成 处理成功 (unresolved => resolved)， 在异步操作成功时调用，并将异步操作的结果作为参数传递出去。

reject函数的作用是，将 Promise 对象的状态从 未处理 变成 处理失败 (unresolved => rejected), 在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise 实例生成以后，可以用 then 方法和 catch 方法分别指定 resolved 状态和 rejected 状态的回调函数。

举例说明：引用网络上的代码示例：

（1）下面通过样例作为演示，我们定义做饭、吃饭、洗碗（cook、eat、wash）这三个方法，它们是层层依赖的关系，下一步的的操作需要使用上一部操作的结果。（这里使用 setTimeout 模拟异步操作）

//做饭
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;
}
 
function wash(data){
    console.log('开始洗碗：' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('洗碗完毕!');
            resolve('干净的碗筷');
        }, 2000);
    });
    return p;
}

（2）使用 then 链式调用这三个方法：

cook()
.then(function(data){
    return eat(data);
})
.then(function(data){
    return wash(data);
})
.then(function(data){
    console.log(data);
});

当然上面代码还可以简化成如下：

cook()
.then(eat)
.then(wash)
.then(function(data){
    console.log(data);
});

（3）运行结果如下：

开始做饭

做饭完毕

开始吃饭：鸡蛋炒饭

吃饭完毕

开始洗完：一块碗一双筷子

洗完完毕

赶紧的碗筷

解释：上述构造方法中的两个参数resolve, reject即是改变promise的状态，resolve 方法把 Promise 的状态置为完成态（Resolved），这时 then 方法就能捕捉到变化，并执行“成功”情况的回调​，resolve, reject可抛出结果，作为then方法中函数的参数。then可接受两个参数，第一个处理Resolved状态的函数，第二个处理Rejected函数。如果只想处理成功，或者失败，对应参数可设置为null,只有一个参数则表示状态改变就执行，不区分状态结果。

另外

catch()方法，它可以和 then 的第二个参数一样，用来指定 reject 的回调，另一个作用是，当执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch 方法中。

all()方法，Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调, 会把所有异步操作的结果放进一个数组中传给 then。

race()方法，race 按字面解释，就是赛跑的意思。race 的用法与 all 一样，只不过 all 是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。

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