谈谈Promise

首先看一段代码

    setTimeout(function(){
        console.log(1)
    }, 3000)
    setTimeout(function(){
        console.log(2)
    }, 2000)
    setTimeout(function(){
        console.log(3)
    }, 1000)
        

此时会输出 3 2 1， 原本我们是想输出 1 2 3 的，但是在异步的情况下，我们没办法改变异步的顺序，这是我们可以用回调函数来控制顺序，但是又有一个扎心的问题 -- 回调地狱

这时我们的promise就出场啦，代码改为：

    new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log(1)
            resolve()
        }, 3000)
    })
    .then(function(data){
        return new Promise(function(resolve, reject){
            setTimeout(function(){
                console.log(2)
                resolve()
            }, 2000)
        })
    })
    .then(function(data){
        return new Promise(function(resolve, reject){
            setTimeout(function () {
                console.log(3)
                resolve()
            }, 1000)
        })
    })

在浏览器预览： 隔3秒输出1，再隔2秒输出2，再隔1秒输出3

这样就符合我们预期的想法了

来看看代码， 先new一下 证明我们第一步应该创建构造函数 Promise(callback) ,接着后面有 then(fn) ，于是我们可以断定 Promise.prototype.then = fn() {} , 于是根据执行情况，我们可以把执行顺序捋一捋

Promise -> 接收的函数立即执行 -> then(fn) (保存参数函数) -> resolve() -> then内部的回调函数

我们再来看看，promomise里面有resolve和reject 那就可以看出promise有两种状态，但这两种只是判断成功或者失败，所以我们还需要一个初始状态。 故： pending / fulfilled / rejected 这三种状态

接着看代码，看着注释，就可以大致明白啦

var PENDING = 'PENDING';
var FULFILLED = 'FULFILLED';
var REJECTED = 'REJECTED';

// 1: 构造函数Promise
function Promise(fn) {
    // 2. 构造函数内初始 状态Pending 和 value
    this.status = PENDING; // 状态是待发状态
    this.value = null;  // 初始值
    this.deffered = []; // 下一个 要执行的Promise是谁，子promise

    // 3.构造函数内调用函数（apply参数是数组，call参数是一个个，调用函数改变this指向， bind不会立即调用，只是改变this）
    fn.call(this, this.resolve.bind(this), this.reject.bind(this));

}

// 4. 结束回调函数， 执行then Promise.prototype.then 是函数
// 5. then函数内不需要保存起成果或者失败的函数
Promise.prototype = {
    constructor: Promise, // 改变回来原型链
    then: function(onfulfilled, onrejected) {
        // 保存该函数
        var obj = {
            onfulfilled: onfulfilled,
            onrejected: onrejected
        }

        // 新来一个Promise对象，让其存储这些
        // 并且能根据不同的Promise去then
        obj.promise = new this.constructor(function(){});
        
        // 保存起接下来的promise
        // console.log(this)
        // console.log(obj.promise)

        // 建立上一个与下一个primise之间的关系
        if(this.status === PENDING) {
           this.deffered.push(obj); 
        }

        // 保证不报错， 未来不能return自己  需要换人
        return obj.promise; // 下一个then的哥们

    },
    
    // 定义成功和失败的回调函数， 改变状态， 记录数据结果， 执行后续的行为
    resolve: function(data) {
        this.status = FULFILLED;
        this.value = data;
        // 执行后续的行为
        this.done();
    },
    reject: function(err) {
        this.status = REJECTED;
        this.value = err;
        // 执行后续的行为
        this.done();
    },
    // 执行后续的行为
    done: function() {
        // 让这些this.deffered(子promise得到执行)
        this.deffered.forEach(task => this.handler(task));

    },
    handler: function(task) {   
        // 判断当前执行的状态是怎样， 调用对应的函数
        var status = this.status;
        var value = this.value;
        var p;
        switch(status) {
            case FULFILLED: 
                p = task.onfulfilled(value);
                break;
            case REJECTED:
                p = task.onrejected(value);
                break;
        }

        // 如果 p是一个promise的话，我们需要让他们继续执行
        // 把后续（task.promise）的deffer 交给这个p
        if(p && p.constructor === Promise) {
            // 是一个promise
            // 把下一个作为then链接的deffer 移交给deffered
            p.deffered = task.promise.deffered;
        }
    },
}

我们按照思路先写一个demo

var PENDING = 'PENDING'
var FULFILLED = 'FULFILLED'
var REJECTED = 'REJECTED'

// 1 构造函数Promise
function Promise(fn) {
    this.status = PENDING;  // 初始化状态
    // 2 构造函数内调用函数 
    this.value = null;  // 初始值
    this.deffered = [];  // 下一个执行的Promise执行是谁
    // 3 构造函数内初始 状态Pending 和 value
    fn()
}

// 4 结束回调函数后执行then -> Promise.prototype.then 是函数
// 5 then函数内部需要保存起成功或者失败的函数
Promise.protope = {
    //  定义成功和失败的回调函数，改变状态，记录数据结果， 执行后续的行为
    resolve: function(data) {
        this.status = FULFILLED;
         this.value = dat
    },
    constructor: Promise,  // 改变回来原型链
    then: function() {

    }

}