来，用ES6写个Promise吧_tenor的专栏文章_微信文章

本文采用es6语法实现Promise基本的功能, 适合有javascript和es6基础的读者，如果没有，请阅读

http://es6.ruanyifeng.com/

回调函数

在日常开发中，通常会使用ajax请求数据，拿到数据后，对数据进行处理。

但是，假设你需要多次ajax请求数据，并且每次ajax请求数据都是基于上一次请求数据作为参数，再次发出请求，于是代码可能就成了这样：

function dataAjax() {
    $.ajax({
        url: '/woCms/getData',
        type: 'get',
        success: function (data) {
            reChargeAjax(data);
        }
    });
}
function reChargeAjax(data) {
    $.ajax({
        url: '/woCms/reCharge',
        type: 'post',
        data: { data },
        success: function (data) {
            loginAjax(data);
        }
    });
}
....

很明显，这样的写法有一些缺点：

如果需求存在多个操作并且层层依赖的话，那这样的嵌套就可能存在多层，并且每次都需要对返回的数据进行处理，这样就严重加大了调试难度，代码不是很直观，并且增加了后期维护的难度
这种函数的层层嵌套，又称之为回调地域，为了解决这种形式存在的缺点，并支持多个并发的请求，于是Promise就出现了

Promise是什么

Promise是一种异步流程的控制手段。
Promise对象能够使我们更合理、更规范的处理异步流程操作.

Promise基本用法

let pro = new Promise(function (resolve, reject) {
});

Promise是一个全局对象，也就是一个类
可通过new关键词创建一个Promise实例
Promise构造函数传递一个匿名函数, 匿名函数有2个参数: resolve和reject
两个参数都是方法，resolve方法处理异步成功后的结果
reject处理异步操作失败后的原因

Promise的三种状态

pending: Promise 创建完成后，默认的初始化状态
fulfilled: resolve方法调用时，表示操作成功
rejected：reject方法调用时，表示操作失败

状态只能从初始化 -> 成功或者初始化 -> 失败，不能逆向转换，也不能在成功fulfilled 和失败rejected之间转换。

Promise 类构造

好了，目前我们知道了Promise的基础定义和语法，那么我们就用代码来模拟Promise的构造函数和内部实现吧

class Promise {
    // 构造函数，构造时传入一个回调函数
    constructor(executor) {
        this.status = "pending";// promise初始化状态为pending
        this.value = undefined;// 成功状态函数的数据
        this.reason = undefined;// 失败状态的原因

        // new Promise((resolve,reject)=>{});
        let resolve = data => {
            // 成功状态函数,只有当promise的状态为pending时才能修改状态
            // 成功或者失败状态函数，只能调用其中的一个
            if (this.status === "pending") {
                this.status = "fulfilled";
                this.value = data;
            }
        }
        let reject = err => {
            if (this.status === "pending") {
                this.status = "rejected";
                this.reason = err;
            }
        }
    }
    executor(resolve, rejcte);
}

在Promise的匿名函数中传入resolve, rejcte这两个函数，分别对应着成功和失败时的处理，根据Promise规范，只有当Promise的状态是初始化状态是才能修改其状态为成功或者失败，并且只能转为成功或者失败。

then方法

在了解Promise创建和状态之后，我们来学习Promise中一个非常重要的方法：then方法

then()方法：用于处理操作后的程序，那么它的语法是什么样子的呢，我们一起来看下

pro.then(function (res) {
    //操作成功的处理
}, function (error) {
    //操作失败的处理
});

那么then函数该如何定义呢？

很明显，then属于Promise原型上的方法，接收2个匿名函数作为参数，第一个是成功函数，第二个是失败函数。

也就是说当Promise状态变为成功的时候，执行第一个函数。当状态变为失败的时候，执行第二个函数。因此then函数可以这样定义：

then(onFulFiled, onRejected) {
    // promise 执行返回的状态为成功态
    if (this.status === "fulfilled") {
        // promise执行成功时返回的数据为成功态函数的参数
        onFulFiled(this.value);
    }
    if (this.status === "rejected") {
        // promise 执行失败是返回的原因为失败态函数的参数
        onRejected(this.reason);
    }
}

Promise then 异步代码队列执行

但是我们现在来看这样一段Promise代码：

let pro = new Promise((resolve, reject) => {
    setTimeout(function () {
        resolve("suc");
    }, 1000);
});
// 同一个promise实例多次调用then函数
pro.then(data => {
    console.log("date", data);
}, err => {
    console.log("err", err);
});
pro.then(data => {
    console.log("date", data);
}, err => {
    console.log("err", err);
})

输出结果为
date suc
date suc

这样Promise中异步调用成功或者失败状态函数，并且Promise实例多次调用then方法，我们可以看到最后输出多次成功状态函数中的内容，而此时:

Promise中异步执行状态函数，但Promise的then函数是还是pending状态
Promise实例pro多次调用then函数，当状态是pending的时候依然会执行状态函数

那么这块在then函数中是如何处理pending状态的逻辑呢？

采用发布订阅的方式，将状态函数存到队列中，之后调用时取出。

class Promise{
    constructor(executor){
        // 当promise中出现异步代码将成功态或者失败态函数封装时
        // 采用发布订阅的方式，将状态函数存到队列中，之后调用时取出
        this.onFuiFiledAry = [];
        this.onRejectedAry = [];

        let resolve = data => {
            if (this.status === "pending") {
                ...
                // 当状态函数队列中有存放的函数时，取出并执行,队列里面存的都是函数
                this.onFulFiledAry.forEach(fn => fn());
            }
        }
        let reject = err => {
            if (this.status === "pending") {
                ...
                this.onRejectedAry.forEach(fn => fn());
            }
        }
    }
    then(onFuiFiled, onRejected) {
        ...
        if (this.status === "pending") {
            this.onFuiFiledAry.push(() => {
                onFuiFiled(this.value);
            });
            this.onRejectedAry.push(() => {
                onRejected(this.reason);
            });
        }
    }
}

Promise then 函数返回一个新的Promise

看过jQuery源码的童鞋肯定都清楚，jQuery是如何实现链式调用的呢？对，就是this，jQuery通过在函数执行完成后通过返回当前对象的引用，也就是this来实现链式调用。

我们先看看一个例子，假设Promise用this来实现链式调用，会出现什么情况呢？

let pro = new Promise(function (resolve, reject) {
    resolve(123);
});
let p2 = pro.then(function () {
    // 如果返回this，那p和p2是同一个promise的话，此时p2的状态也应该是成功
    // p2状态设置为成功态了，就不能再修改了,但是此时抛出了异常，应该是走下个then的成功态函数
    throw new Error("error");
});
p2.then(function (data) {
    console.log("promise success", data);
}, function (err) {
    // 此时捕获到了错误，说明不是同一个promise，因为promise的状态变为成功后是不能再修改状态
    console.log("promise or this:", err);
})

很明显，Promise发生异常，抛出Error时，p2实例的状态已经是失败态了，所以会走下一个then的失败态函数，而结果也正是这样，说明Promise并不是通过this来实现链式调用。

那Promise中的链式调用是如何实现的呢？

结果是，返回一个新的Promise.

then(onFuiFiled, onRejected) {
    let newpro;
    if (this.status === "fulfilled") {
        newpro = new Promise((resolve, reject) => {
            onFuiFiled(this.value);
        });
    }
    if (this.status === "rejected") {
        newpro = new Promise((resolve, reject) => {
            onRejected(this.reason);
        });
    }
    if (this.status === "pending") {
        newpro = new Promise((resolve, reject) => {
            this.onFuiFiledAry.push(() => {
                onFuiFiled(this.value);
            });
            this.onRejectedAry.push(() => {
                onRejected(this.reason);
            });
        });
    }
    return newpro;
}

Promise then函数返回值解析

好了，我们继续将目光放在then函数上，then函数接收两个匿名函数，那假设then函数返回的是数值、对象、函数，或者是promise,这块Promise又是如何实现的呢？

来，用ES6写个Promise吧

正文