Promise 源碼分析

1. Promise.all()方法:

返回全部成功結(jié)果的數(shù)組值隐孽,如果有報(bào)錯(cuò),立即返回reject,結(jié)束。

// all 方法:全部成功返回一個(gè)數(shù)組穷娱,失敗就返回失敗的值
myPromise.all = (values) => {//傳入的是一個(gè)數(shù)組 [p1,p2]
  return new myPromise((resolve, reject) => {
    let results = [];
    let i = 0;
    let processData = (value, index) => {
      results[index] = value;
      i++;
      if (i === values.length) {
        resolve(results)
      }
    }
    for (let i = 0; i < values.length; i++) {
      //獲取當(dāng)前的函數(shù)
      let current = values[i];
      //判斷是函數(shù)還是變量
      if (typeof current === 'function' || (typeof current === 'object' && typeof current !== null)) {
        if (typeof current.then === 'function') {
          current.then(y => {
            processData(y, i)
          }, err => {
            reject(err); //只要有一個(gè)傳入的promise沒有執(zhí)行成功就走 reject
            return;
          })
        } else {
          //常量
          processData(values[i], i)
        }
      }
    }
  })
}

2. Promise.race()方法:

返回第一個(gè)結(jié)果,不管成功或失敗翘地。

// race 方法:先快執(zhí)行誰冕碟,然后返回
myPromise.race = (values) => {//傳入的是一個(gè)數(shù)組[p1,p2]
  return new myPromise((resolve, reject) => {
    for (let i = 0; i < values.length; i++) {
      let current = values[i];
      if (typeof current === 'function' || (typeof current === 'object' && typeof current !== null)) {
        current.then(y => {
          resolve(y)
          return
        }, err => {
          reject(err)
          return
        })
      } else {
        resolve(current)
      }
    }
  })
}

3.源碼

class myPromise {
  constructor(executor) {
    this.state = 'pending'; //狀態(tài)值
    this.value = undefined; //成功的返回值
    this.reason = undefined; //失敗的返回值
    this.onResolveCallbacks = []; //成功的回調(diào)函數(shù)
    this.onRejectCallbacks = []; //失敗的回調(diào)函數(shù)
    //成功
    let resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fullFilled'
        this.value = value
        this.onResolveCallbacks.forEach(fn => fn())
      }
    }
    //失敗
    let reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.reason = reason
        this.onRejectCallbacks.forEach(fn => fn())
      }
    }
    try {
      //執(zhí)行函數(shù)
      executor(resolve, reject)
    } catch (err) {
      //失敗則直接執(zhí)行reject函數(shù)
      reject(err)
    }
  }
  then(onFullfilled, onRejected) {
    // then 返回一個(gè)promise ,這樣就是一個(gè)遞歸
    let promise2 = new myPromise((resolve, reject) => {
      let x;
      if (this.state === 'fullFilled') {
        //同步憎亚,狀態(tài)為fullfilled,執(zhí)行 onFullfilled,傳入成功的值
        setTimeout(() => {
          try {
            x = onFullfilled(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            //中間任何一個(gè)環(huán)節(jié)報(bào)錯(cuò)都走reject
            reject(error)
          }
        }, 0)//同步無法使用promise2员寇,所以借用setTimeout異步的方式。
      }

      if (this.state === 'rejected') {
        //異步第美,rejected,執(zhí)行 onRejected,傳入失敗的值
        setTimeout(() => {
          try {
            x = onRejected(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            //中間任何一個(gè)環(huán)節(jié)報(bào)錯(cuò)都走reject
            reject(error)
          }
        }, 0)//同步無法使用promise2蝶锋,所以借用setTimeout異步的方式。
      }
      //異步
      if (this.state === 'pending') {
        this.onResolveCallbacks.push(() => {
          setTimeout(() => {
            try {
              x = onFullfilled(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (error) {
              //中間任何一個(gè)環(huán)節(jié)報(bào)錯(cuò)都走reject
              reject(error)
            }
          }, 0)//同步無法使用promise2什往,所以借用setTimeout異步的方式扳缕。
        })
        this.onRejectCallbacks.push(() => {
          setTimeout(() => {
            try {
              x = onRejected(this.reason)
              resolvePromise(promise2, x, resolve, reject)
            } catch (error) {
              //中間任何一個(gè)環(huán)節(jié)報(bào)錯(cuò)都走reject
              reject(error)
            }
          }, 0)//同步無法使用promise2,所以借用setTimeout異步的方式别威。
        })
      }
    })
    return promise2;//返回promise
  }
  finally(callback) {
    return this.then(callback, callback)
  }
  catch(rejectFuc) {
    return this.then(null, rejectFuc);
  }
}

// 這個(gè)方法的主要左右是用來判斷x的值躯舔,如果x的值是一個(gè)普通的值,就直接返回x的值省古,如果x的值是一個(gè)promise粥庄,就要返回x.then()執(zhí)行的結(jié)果,核心代碼如下
const resolvePromise = (promise2, x, resolve, reject) => {
  // x和promise2不能是同一個(gè)豺妓,如果是同一個(gè)就報(bào)錯(cuò)
  if (promise2 === x) {
    return reject(
      new TypeError('Chaining cycle detected for promise #<promise>')
    )
  }
  // 判斷x是否是一個(gè)對(duì)象惜互,判斷函數(shù)是否是對(duì)象的方法有: typeof instanceof constructor toString
  if (typeof x === 'object' && x != null || typeof x === 'function') {
    let called;
    try {
      let then = x.then; //取 then可以報(bào)錯(cuò)布讹,報(bào)錯(cuò)就走 reject();
      if (typeof then === 'function') {
        then.call(x, y => {
          console.log('y', y);
          if (called) return;
          called = true;
          resolve(y); //采用promise的成功結(jié)果,并且向下傳遞
          resolvePromise(promise2, y, resolve, reject)
        }, r => {
          if (called) return;
          called = true;
          reject(r);//采用promise的成功結(jié)果训堆,并且向下傳遞
        })
      } else {
        resolve(x); //x不是一個(gè)函數(shù)炒事,是一個(gè)對(duì)象
      }
    } catch (error) {
      if (called) return;
      called = true;
      reject(error);//報(bào)錯(cuò)就走 reject();
    }
  } else {
    // x是一個(gè)普通值
    resolve(x)
  }
}

myPromise.resolve = (value) => {
  return new myPromise((resolve, reject) => {
    resolve(value)
  })
}
myPromise.reject = (value) => {
  return new myPromise((resolve, reject) => {
    reject(value)
  })
}

// all 方法:全部成功返回一個(gè)數(shù)組,失敗就返回失敗的值
myPromise.all = (values) => {//傳入的是一個(gè)數(shù)組 [p1,p2]
  return new myPromise((resolve, reject) => {
    let results = [];
    let i = 0;
    let processData = (value, index) => {
      results[index] = value;
      i++;
      if (i === values.length) {
        resolve(results)
      }
    }
    for (let i = 0; i < values.length; i++) {
      //獲取當(dāng)前的函數(shù)
      let current = values[i];
      //判斷是函數(shù)還是變量
      if (typeof current === 'function' || (typeof current === 'object' && typeof current !== null)) {
        if (typeof current.then === 'function') {
          current.then(y => {
            processData(y, i)
          }, err => {
            reject(err); //只要有一個(gè)傳入的promise沒有執(zhí)行成功就走 reject
            return;
          })
        } else {
          //常量
          processData(values[i], i)
        }
      }
    }
  })
}

// race 方法:先快執(zhí)行誰蔫慧,然后返回
myPromise.race = (values) => {//傳入的是一個(gè)數(shù)組[p1,p2]
  return new myPromise((resolve, reject) => {
    for (let i = 0; i < values.length; i++) {
      let current = values[i];
      if (typeof current === 'function' || (typeof current === 'object' && typeof current !== null)) {
        current.then(y => {
          resolve(y)
          return
        }, err => {
          reject(err)
          return
        })
      } else {
        resolve(current)
      }
    }
  })
}


let p = new myPromise((resolve, reject) => {
  // resolve('成功')  //走了成功就不會(huì)走失敗
  // throw new Error('失敗了');
  // reject('failed') // 走了失敗就不會(huì)走成功
  setTimeout(() => {
    resolve('success')
  }, 0)
  
})

p.then(res => {
  console.log(res);
}, err => {
  console.log(err);
})
console.log(p);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末挠乳,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子姑躲,更是在濱河造成了極大的恐慌睡扬,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件黍析,死亡現(xiàn)場離奇詭異卖怜,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)阐枣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門马靠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蔼两,你說我怎么就攤上這事甩鳄。” “怎么了额划?”我有些...
    開封第一講書人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵妙啃,是天一觀的道長。 經(jīng)常有香客問我俊戳,道長揖赴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任抑胎,我火速辦了婚禮燥滑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘阿逃。我一直安慰自己铭拧,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開白布盆昙。 她就那樣靜靜地躺著羽历,像睡著了一般。 火紅的嫁衣襯著肌膚如雪淡喜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評(píng)論 1 299
  • 那天诵闭,我揣著相機(jī)與錄音炼团,去河邊找鬼澎嚣。 笑死,一個(gè)胖子當(dāng)著我的面吹牛瘟芝,可吹牛的內(nèi)容都是我干的易桃。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼锌俱,長吁一口氣:“原來是場噩夢啊……” “哼晤郑!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起贸宏,我...
    開封第一講書人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤造寝,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后吭练,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诫龙,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年鲫咽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了签赃。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡分尸,死狀恐怖锦聊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情箩绍,我是刑警寧澤括丁,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站伶选,受9級(jí)特大地震影響史飞,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜仰税,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一构资、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧陨簇,春花似錦吐绵、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至耙饰,卻和暖如春纹笼,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背苟跪。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來泰國打工廷痘, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蔓涧,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓笋额,卻偏偏與公主長得像元暴,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子兄猩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容