ES6异步方案之Promise详解

一、Promise基本流程

1、Promise的实例对象有三个状态

pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败

2、状态机机制
promise状态机制

• executor的resolve参数被调用时会将promise的状态从pending改为fulfilled
• executor的reject参数被调用时会将promise的状态从pending改为rejected
• 如果在executor函数中抛出一个错误，那么该promise 状态为rejected

3、Promise.prototype.then
当promise对象的状态发生改变时，绑定在其身上的then方法就会被调用。

then方法包含两个参数：onfulfilled函数 和 onrejected函数，它们都是 Function 类型。
当Promise状态为fulfilled时，调用 then 的 onfulfilled 方法;
当Promise状态为rejected时，调用 then 的 onrejected 方法.
所以在异步操作的完成和绑定处理方法之间不存在竞争。
then() 方法返回一个 Promise 。

4、then

语法:

p.then(onFulfilled, onRejected);
p.then(function(value) {// fulfillment}, function(reason) {// rejection});

参数
onFulfilled：
当Promise变成接受状态时，该参数作为回调函数被调用。该函数有一个参数，即接受的最终结果。由executor中resolve的第一个参数提供
onRejected
当Promise变成拒绝状态（rejection ）时，该参数作为回调函数被调用该函数有一个参数,，即拒绝的原因。由executor中reject的第一个参数提供。或系统提供的报错信息。
返回值（前3个不用）:
then方法返回一个新的Promise，而它的行为与then中的回调函数的返回值有关：

1)如果then中的回调函数返回一个值，那么then返回的Promise将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。

2)如果then中的回调函数抛出一个错误，那么then返回的Promise将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。

3)如果then中的回调函数返回一个已经是接受状态的Promise，那么then返回的Promise也会成为接受状态，并且将那个Promise的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。

4)如果then中的回调函数返回一个已经是拒绝状态的Promise，那么then返回的Promise也会成为拒绝状态，并且将那个Promise的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。

5)如果then中的回调函数返回一个未定状态（pending）的Promise，那么then返回Promise的状态也是未定的，并且它的终态与那个Promise的终态相同；同时，它变为终态时调用的回调函数参数与那个Promise变为终态时的回调函数的参数是相同的。

二、Promise链式调用

Promise.prototype.then方法反回的也是一个promise对象。所以我们可以进行链式调用。

三、数据传递

参数传递如下：
1、resolve() 只能接受并处理一个参数，多余的参数会被忽略掉。

2、Resolve（） 单个参数，多个参数

参数传递代码：

<script>
    /*Promise异步处理：用同步的编码方式处理异步代码  可以解决回调地狱  有利于业务逻辑的梳理
    优点：传递数据方便
    缺点：没有摆脱回调*/
    // 数据传递
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function (flag) {
            if (flag) {
                console.log("success-1");
                resolve(flag);
            } else {
                console.log("error-1");
                reject();
            }
        }, 1000, true)
    });
    promise
        .then(function (data) {
            return new Promise(function (resolve, reject) {
                setTimeout(function (flag) {
                    if (flag) {
                        console.log("success-2");
                        resolve(flag);
                    } else {
                        console.log("error-2");
                        reject();
                    }
                }, 1000, data)
            })

        })
        .then(function (data) {
            return new Promise(function () {
                setTimeout(function (flag) {
                    if (flag) {
                        console.log("success-3");

                    } else {
                        console.log("error-3");

                    }
                }, 1000, data)
            })
        });
</script>

四、优缺点

优点：数据传递 清晰
缺点：没有摆脱回调