Promise詳解與實(shí)現(xiàn)(Promise/A+)

一、 什么是Promise躏吊?

Promise是異步編程的一種解決方案:從語法上講氛改,Promise是一個(gè)對(duì)象,從它可以獲取異步操作的消息比伏;從本意上講胜卤,它是承諾,承諾它過一段時(shí)間會(huì)給你一個(gè)結(jié)果凳怨。Promise有三種狀態(tài):pending(等待態(tài))瑰艘,fulfiled(成功態(tài))rejected(失敗態(tài))肤舞;狀態(tài)一旦改變紫新,就不會(huì)再變。創(chuàng)造Promise實(shí)例后李剖,它會(huì)立即執(zhí)行芒率。

二、Promise/A+規(guī)范

詳細(xì)介紹了該then方法的行為篙顺,提供了可互操作的基礎(chǔ)偶芍,所有Promises/A+兼容的Promise實(shí)現(xiàn)都可以依靠該基礎(chǔ)來提供。因此德玫,該規(guī)范應(yīng)被認(rèn)為是非常穩(wěn)定的匪蟀。盡管Promises/A+組織有時(shí)會(huì)通過向后兼容的微小更改來修訂此規(guī)范,以解決新發(fā)現(xiàn)的極端情況宰僧,但只有經(jīng)過仔細(xì)考慮材彪,討論和測(cè)試之后,我們才會(huì)集成大型或向后兼容的更改琴儿。

三段化、Promise的實(shí)現(xiàn)

1. Promise是具有then行為符合本規(guī)范的方法的對(duì)象或函數(shù)。
  const promise = new Promise((resolve, reject) => {
      // 異步處理操作
      // 處理結(jié)束后調(diào)用resolve或reject
  })
2. Promise States

Promise是一個(gè)狀態(tài)機(jī)造成,有三種狀態(tài)分別是pending(等待)显熏、fulfilled(完成態(tài))rejected(失敗態(tài))晒屎。當(dāng)Promise處于完成或者失敗狀態(tài)時(shí)喘蟆,它的狀態(tài)不可變

  const PENDINT = 'pending';
  const FULFILLED = 'fulfilled'; // 處于此狀態(tài)時(shí),狀態(tài)不可變
  const REJECTED = 'rejected'; // 處于此狀態(tài)時(shí)鼓鲁,狀態(tài)不可變
3.1 then方法

Promise必須提供一種then訪問其當(dāng)前或最終價(jià)值或原因的方法蕴轨。then方法接受兩個(gè)參數(shù),并且這兩個(gè)必須是方法坐桩,且都有默認(rèn)值

  promise.then(onFulfilled, onRejected);
3.2 then必須返回一個(gè)Promise
  then(onFulfilled, onRejected) {
      let promise2 = new Promise((resolve, reject) => {
          // 這里對(duì)返回值進(jìn)行處理
      })
      return promise2;
  }

3.2.1 如果onFulFilled或者onRejected返回一個(gè)值x尺棋,需要對(duì)返回值進(jìn)行處理
3.2.2 如果任何一個(gè)onFulFilledonRejected發(fā)生異常e,則promise2必須以e為異常為onRejected理由

4. Promise Resolution Procedure
  // 使用此函數(shù)對(duì)promise2和x進(jìn)行處理
  // 在`resolvePromise`函數(shù)中進(jìn)行處理時(shí),需要添加一個(gè)變量進(jìn)行`Promise state`控制
  resolvePromise(promise2, x, resolve, reject);

4.1 如果xpromise2是同一個(gè)Object膘螟,則拋出類型錯(cuò)誤

 if (promise2 === x) {
       return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
   }

4.2 如果x是不為null的對(duì)象或者函數(shù)成福,則需要做取值then操作

  if(typeof x === 'object' && x !== null || typeof x === 'function'){
    try{
      let then = x.then;
      if(typeof then === 'function'){
        then.call(
          x,
          y => { resolvePromise(promise2, y, resolve, reject); },
          r => { reject(r) }
        )
      }else{
        resolve(x);
      }
     }catch(err){
      reject(err);
     }
    // 此過程中需要使用try catch 包裹,如果有錯(cuò)誤荆残,則調(diào)用reject
  }else{
    // 如果`x`只是一個(gè)普通的值奴艾,則返回即可
    resolve(x);
  }
5. My Promise 的全部實(shí)現(xiàn)代碼
let PENDING = 'PENDING';
let RESOLVE = 'RESOLVE';
let REJECT = 'REJECT';

const isPromise = (x) => {
    if (typeof x === 'object' && x !== null || typeof x === 'function') {
        if (typeof x.then === 'function') {
            return true;
        } else {
            return false;
        }
    } else {
        return false;
    }
}

const resolvePromise = (promise2, x, resolve, reject) => {
    // 判斷promise2 和 x 是否相等,如果相等則會(huì)死循環(huán)
    if (promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    // 如果 x 是不為Null對(duì)象或者函數(shù)
    if (typeof x === 'object' && x !== null || typeof x === 'function') {
        let called;  // promise2的調(diào)用限制内斯,防止多次調(diào)用成功和失敗
        // 去取值的then蕴潦,可能會(huì)出錯(cuò),使用try
        try {
            let then = x.then;
            if (typeof then === 'function') {
                // 如果是函數(shù)俘闯,則去調(diào)用潭苞,調(diào)用要 call then user x
                // y => resolve , r => reject
                then.call(x, y => {
                    if (called) {
                        return;
                    }
                    called = true;
                    // resolve中很可能再次返回一個(gè)Promise實(shí)例
                    resolvePromise(promise2, y, resolve, reject);
                    // resolve(y)
                }, r => {
                    if (called) {
                        return;
                    }
                    called = true;
                    reject(r);
                })
            } else {
                if (called) {
                    return;
                }
                called = true;
                resolve(x);
            }
        } catch (error) {
            if (called) {
                return;
            }
            called = true;
            reject(error);
        }
    } else {
        // 否則就是普通值
        resolve(x);
    }
}

class Promise {
    constructor(execute = () => { }) {
        // Promise整體狀態(tài)
        this.status = PENDING;
        // 成功回調(diào)
        this.onFulfilledCb = [];
        // 失敗回調(diào)
        this.onREjectedCb = [];

        let resolve = (value) => {
            if (this.status === PENDING) {
                this.status = RESOLVE;
                this.value = value;
                this.onFulfilledCb.forEach(cb => cb());
            }
        }

        let reject = (value) => {
            if (this.status === PENDING) {
                this.status = REJECT;
                this.value = value;
                this.onREjectedCb.forEach(cb => cb());
            }
        }

        // 如果執(zhí)行函數(shù)內(nèi)有錯(cuò)誤,則直接拋出
        try {
            execute(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }
    then(onFulfilled, onRejected) {
        // 判斷是不是函數(shù)真朗,如果是函數(shù)此疹,則往下執(zhí)行,如果不是函數(shù)遮婶,則給一個(gè)函數(shù)蝗碎,返回當(dāng)前值
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : data => data;
        onRejected = typeof onRejected === 'function' ? onRejected : err => {
            throw err
        };

        let promise2 = new Promise((resolve, reject) => {
            // 同步執(zhí)行
            // 成功執(zhí)行
            if (this.status === RESOLVE) {
                /**
                 * 這段邏輯不可抽離出去,抽離出去會(huì)報(bào)錯(cuò) cannot access 'promise2' before initialization
                 * 猜測(cè)可能在執(zhí)行函數(shù)旗扑,將抽離出去的代碼返回時(shí)蹦骑,new Promise還沒有執(zhí)行完畢
                 */
                setTimeout(() => {
                    try {
                        let x = onFulfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error)
                    }
                }, 0);
            }
            // 失敗執(zhí)行
            if (this.status === REJECT) {
                setTimeout(() => {
                    try {
                        let x = onRejected(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error)
                    }
                }, 0);
            }

            // 異步執(zhí)行
            if (this.status === PENDING) {
                this.onFulfilledCb.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onFulfilled(this.value);
                            resolvePromise(promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error)
                        }
                    }, 0);
                })
                this.onREjectedCb.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onRejected(this.value);
                            resolvePromise(promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error)
                        }
                    }, 0);
                })
            }
        })

        return promise2;
    }
    finally(cb) {
        return this.then(
            // 這里將 resolve.then返回,是為了保證 cb 中的代碼執(zhí)行完畢臀防,返回then中返回的Promise
            data => this.resolve(cb(data)).then(() => data),
            err => this.resolve(cb(err)).then(() => { throw err; })
        )
    }
    static resolve = (arg) => {
        if (isPromise(arg)) {
            let promise2 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    try {
                        let x = arg.then();
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                }, 0);
            })
            return promise2;
        } else {
            return new Promise(resolve => {
                resolve(arg);
            })
        }
    }
    static all = (values) => {
        return new Promise((resolve, reject) => {
            let arr = [];
            let index = 0;

            const pushIn = (key, data) => {
                arr[key] = data;
                index++;
                if (index === values.length) resolve(arr);
            }

            for (let i = 0; i < values.length; i++) {
                const item = values[i];
                if (isPromise(item)) {
                    item.then(data => {
                        pushIn(i, data);
                    }, reject);
                } else {
                    pushIn(i, item);
                }
            }
        })
    }

    static defer = () => {
        let dfd = {};
        dfd.promise = new Promise((resolve, reject) => {
            dfd.resolve = resolve;
            dfd.reject = reject;
        })
        return dfd;
    }
    static deferred = this.defer;

    static author = 'lxh'
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末眠菇,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子清钥,更是在濱河造成了極大的恐慌琼锋,老刑警劉巖放闺,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件祟昭,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡怖侦,警方通過查閱死者的電腦和手機(jī)篡悟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來匾寝,“玉大人搬葬,你說我怎么就攤上這事⊙藁冢” “怎么了急凰?”我有些...
    開封第一講書人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)猜年。 經(jīng)常有香客問我抡锈,道長(zhǎng)疾忍,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任床三,我火速辦了婚禮一罩,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘撇簿。我一直安慰自己聂渊,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開白布四瘫。 她就那樣靜靜地躺著汉嗽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪找蜜。 梳的紋絲不亂的頭發(fā)上诊胞,一...
    開封第一講書人閱讀 49,764評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音锹杈,去河邊找鬼撵孤。 笑死,一個(gè)胖子當(dāng)著我的面吹牛竭望,可吹牛的內(nèi)容都是我干的邪码。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼咬清,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼闭专!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起旧烧,我...
    開封第一講書人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤影钉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后掘剪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體平委,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年夺谁,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了廉赔。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡匾鸥,死狀恐怖蜡塌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情勿负,我是刑警寧澤馏艾,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響琅摩,放射性物質(zhì)發(fā)生泄漏厚者。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一迫吐、第九天 我趴在偏房一處隱蔽的房頂上張望库菲。 院中可真熱鬧,春花似錦志膀、人聲如沸熙宇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽烫止。三九已至,卻和暖如春戳稽,著一層夾襖步出監(jiān)牢的瞬間馆蠕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來泰國(guó)打工惊奇, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留互躬,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓颂郎,卻偏偏與公主長(zhǎng)得像吼渡,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子乓序,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348