Promise

同步與異步

一個主任務(wù)的執(zhí)行過程中調(diào)用了一個子任務(wù)

如果需要停下主任務(wù)的執(zhí)行,等待子任務(wù)執(zhí)行完畢,再繼續(xù)執(zhí)行主任務(wù).這種編程方式稱為同步編程.

如果不需要停下主任務(wù)的執(zhí)行,無論該子任務(wù)是否執(zhí)行完畢,都可以繼續(xù)執(zhí)行主任務(wù).這種編程方式成為異步編程.

一個簡單的例子

callback_async_simple.png

promise_async_simple.png

回調(diào)與Promise

我們再來看一個異步的例子

callback_async_complex.png

promise_async.png

小結(jié)

Promise是JavaScript多種異步編程解決方案中的其中一種,回調(diào)也能實(shí)現(xiàn)異步編程,
Promise的出現(xiàn)就是為了替代掉回調(diào)的解決方案,讓異步編程以一種同步的語法呈現(xiàn).

Promise/A+的實(shí)現(xiàn)

Promise/A+ 只詳細(xì)規(guī)范了then方法,對于Promise的構(gòu)造方法和其他輔助或拓展方法沒有加以限制.

Promise的構(gòu)造方法

Promise構(gòu)造方法接受一個函數(shù)作為參數(shù),參數(shù)函數(shù)又接受兩個函數(shù)作為參數(shù).

promise_constructor.png

promise_states.png

promise_states_property.png

then方法

Promise的then函數(shù)接受兩個參數(shù):

then_method_call.png

then_method_return_promise.png

then_ignore_para.png

1. 該函數(shù)在Promise變?yōu)橐褍冬F(xiàn)(fulfilled)狀態(tài)后必須調(diào)用,并且將Promise的終值作為該函數(shù)的第一個參數(shù).
2. 該函數(shù)在Promise變?yōu)橐褍冬F(xiàn)(fulfilled)狀態(tài)之前不可調(diào)用.
3. 該函數(shù)只能被調(diào)用一次.

如果onRejected是一個函數(shù):

1. 該函數(shù)在Promise變?yōu)橐丫芙^(rejected)狀態(tài)后必須調(diào)用,并且將Promise的拒因作為該函數(shù)的第一個參數(shù).
2. 該函數(shù)在Promise變?yōu)橐褍冬F(xiàn)(rejected)狀態(tài)之前不可調(diào)用.
3. 該函數(shù)只能被調(diào)用一次.
   

then函數(shù)可以被同一個Promise調(diào)用多次

1. 如果Promise已兌現(xiàn),所有onFulfilled依照被注冊的順序依次執(zhí)行
2. 如果Promise已拒絕,所有onRejected依照被注冊的順序一次執(zhí)行
   
   
   then_para_isfunciton_call.png
   
   
   
   
   
   resolve_$_reject.png
   
   
   

onFulfilled 和 onRejected只有在執(zhí)行環(huán)境堆棧僅包含平臺代碼時才可被調(diào)用.
onFulfilled 和 onRejected必須作為函數(shù)被調(diào)用(沒有this值)

settimeout_deal.png

settimeout_then.png

resolve_promise.png

ondeal_err.png

then_ignore_para_red_box.png

resolve_promise_refer_to_same.png

resolve_promise_x_is_promise.png

resolve_promise_x_isnot_obj.png

resolve_promise_get_then.png

resolve_promise_then_isnot_function.png

resolve_promise_then_is_function.png

resolve_promise_called.png

resolve_promise_then_err.png

promise_resolve_all.png

promise_plus_excute.png

class PromiseAPlus {

    private _state: PromiseState = PromiseState.pending;
    private _promiseResolveValue;
    private _promiseRejectReson;
    private _onFulfilledParameters: Function[] = [];
    private _onRejectedParameters: Function[] = [];

    public constructor(excutor) {
        excutor(this.resolve.bind(this), this.reject.bind(this));
    }

    private resolve(value) {
        const ts = this;
        if (ts._state != PromiseState.pending) {
            throw new Error("MyPromise is fulfilled or rejected");
        }
        ts._promiseResolveValue = value;
        ts._state = PromiseState.fulfilled;
        setTimeout(() => {
            ts._onFulfilledParameters
                .forEach((onFulfilled) => {
                    onFulfilled();
                });
        }, 0);
    }

    private reject(reson) {
        const ts = this;
        if (this._state != PromiseState.pending) {
            throw new Error("MyPromise is fulfilled or rejected");
        }
        ts._promiseRejectReson = reson;
        ts._state = PromiseState.rejected;
        setTimeout(() => {
            ts._onRejectedParameters
                .forEach((onRejected) => {
                    onRejected();
                });
        }, 0);
    }

    public then(onFulfilled?: (value: any) => any, onRejected?: (reson: any) => any) {
        const ts = this;
        let promise = new PromiseAPlus((resolve, reject) => {
            switch (ts._state) {
                case PromiseState.fulfilled:
                    setTimeout(() => {
                        ts._onFulfilledF(promise, onFulfilled, resolve, reject);
                    }, 0);
                    break;
                case PromiseState.rejected:
                    setTimeout(() => {
                        ts._onRejectedF(promise, onFulfilled, resolve, reject);
                    }, 0);
                    break;
                case PromiseState.pending:
                    ts._onFulfilledParameters.push(() => {
                        ts._onFulfilledF(promise, onFulfilled, resolve, reject);
                    });
                    ts._onRejectedParameters.push(() => {
                        ts._onRejectedF(promise, onFulfilled, resolve, reject);
                    });
                    break;
            }
        });
        return promise;
    }

    private _onFulfilledF(promise: PromiseAPlus, onFulfilled: onFulfilled, resolve: (value) => any, reject: (reson: any) => any): void {
        if (typeof onFulfilled != "function") {
            resolve(this._promiseResolveValue);
            return;
        }
        let x: any, hasErr: boolean;
        try {
            x = onFulfilled(this._promiseResolveValue);
        } catch (err) {
            hasErr = !!err;
            reject(err);
        }
        !hasErr && this._resolvePromiseF(promise, x, resolve, reject);
    }

    private _onRejectedF(promise: PromiseAPlus, onRejected: onRejected, resolve: (value) => any, reject: (reson: any) => any): void {
        if (typeof onRejected != "function") {
            reject(this._promiseRejectReson);
            return;
        }
        let x: any, hasErr: boolean;
        try {
            x = onRejected(this._promiseRejectReson);
        } catch (err) {
            hasErr = !!err;
            reject(err);
        }
        !hasErr && this._resolvePromiseF(promise, x, resolve, reject);
    }

    private _resolvePromiseF(promise: PromiseAPlus, x: any, resolve: (value: any) => any, reject: (reson: any) => any): void {
        if (promise === x) {
            reject(new TypeError("promise and x refer to same value"));
            return;
        }

        if (x instanceof PromiseAPlus) {
            x.then(resolve, reject);
            return;
        }

        if (typeof x != "object" && typeof x != "function") {
            resolve(x);
            return;
        }

        let then;
        try {
            then = x.then;
        } catch (err) {
            reject(err);
            return;
        }

        if (typeof then != "function") {
            resolve(x);
            return;
        }

        let called: boolean;
        try {
            then.call(x, y => {
                if (called) {
                    return;
                }
                called = true;
                promise._resolvePromiseF(promise, y, resolve, reject);
            }, r => {
                if (called) {
                    return;
                }
                called = true;
                reject(r);
            });
        } catch (err) {
            if(called){
                return;
            }
            reject(err);
        }

    }
}