ES6异步解决方案promise原理及简单实现

概述

Promise是ES6规范中定义的一种异步解决方案，它可以在异步函数处理流程中分离执行代码和处理结果，还能够添加处理成功、失败后的钩子函数，下面是一个简单案例

new promise(funcion(resolve, reject){
	window.setTimeout(()=>{
		console.log("end 2000");
		resolve("hello");
	},2000)
}).then(msg=>{
	console.log("recv:"+msg)
})

解析

上述代码可以看到，首先是new一个promise实例，对象会传入一个执行函数作为参数，该函数称为Z
Z接受两个固定参数，resolve与reject，在Z的异步逻辑处理完成后执行resolve（），然后执行then函数内部的逻辑，同时resolve函数可以传入参数被then函数接收
在这里，可能会产生如下疑问

1. promise实例传入的逻辑函数，为什么加resolve, reject两个参数
2. resolve是如何触发then函数的，then函数又是如何接受数据的

简单思考一下，此处有点类似发布-订阅模式，resolve（）相当于一个事件通知，对象接收到通知后，执行下一步操作，这里便应该有一个事件队列，对此我们做一个模拟实现

class KPromise {

    static PENDING = 'PENDING';
    static RESOLVED = 'RESOLVED';
    static REJECTED = 'REJECTED';

    constructor( handler ) {

        if ( typeof handler !== 'function' ) throw new TypeError('Promise resolver undefined is not a function');

        this.resolvedQueues = [];
        this.rejectedQueues = [];
        this.finayllyQueues = [];

        this.status = KPromise.PENDING;
        this.value;

        handler( this._resolve.bind(this), this._reject.bind(this) );

    }

    _resolve(val) {
        window.addEventListener('message', _=>{
        	//状态变化后不再响应处理
            if (this.status !== KPromise.PENDING) return; 
            // console.log('_resolve');
            this.status = KPromise.RESOLVED;
            this.value = val;

            let handler;
            while( handler = this.resolvedQueues.shift() ) {
                handler(this.value);
            }
            this._finally(this.value);
        });
        //resolve函数载入微命令之中，避免声明的promise函数内部无异步操作时出现未完成声明提前执行的情况
        window.postMessage('');
    }

    _reject(val) {
        window.addEventListener('message', _=>{
            if (this.status !== KPromise.PENDING) return;
            this.status = KPromise.REJECTED;
            this.value = val;

            let handler;
            //循环执行队列
            while( handler = this.rejectedQueues.shift() ) {
                handler(this.value);
            }
            this._finally(this.value);
        });
        window.postMessage('');
    }

    _finally() {
        window.addEventListener('message', _=>{
            this.status = KPromise.REJECTED;

            let handler;
            while( handler = this.finayllyQueues.shift() ) {
                handler(this.value);
            }
        });
        window.postMessage('');
    }

    then( resolvedHandler, rejectedHandler ) {

        // 返回一个新的promise对象，使then函数可以链式添加
        return new KPromise( (resolve, reject) => {
            function newResolvedHandler(val) {
                if (typeof resolvedHandler === 'function') {
                    let result = resolvedHandler(val);

                    if (result instanceof KPromise) {
                        result.then(resolve, reject);
                    } else {
                        resolve(result);
                    }
                } else {
                    resolve(val);
                }
            }
            function newRejectedHandler(val) {
                if (typeof rejectedHandler === 'function') {
                    let result = rejectedHandler(val);
                    if (result instanceof KPromise) {
                        result.then(resolve, reject);
                    } else {
                        reject(result);
                    }
                } else {
                    reject(val);
                }
            }
			//事件函数导入队列
            this.resolvedQueues.push(newResolvedHandler);
            this.rejectedQueues.push(newRejectedHandler);

        } );
    }

    finally(finallyHandler) {
        this.finayllyQueues.push(finallyHandler);
    }


    static resolve(val) {
        return new Promise(resolve => {
            resolve(val);
        });
    }

    static reject(val) {
        return new Promise((resolve, reject) => {
            reject(val);
        });
    }
}