手寫Promise

来源:https://www.cnblogs.com/xsk-walter/archive/2022/05/17/16273671.html
-Advertisement-
Play Games

完整項目地址: [email protected]:xsk-walter/myPromise.git // index.js /* 1. Promise 就是一個類 在執行這個類的時候 需要傳遞一個執行器進去 執行器會立即執行 2. Promise 中有三種狀態 分別為 成功 fulfilled 失敗 r ...


完整項目地址: [email protected]:xsk-walter/myPromise.git
// index.js
/*
  1. Promise 就是一個類 在執行這個類的時候 需要傳遞一個執行器進去 執行器會立即執行
  2. Promise 中有三種狀態 分別為 成功 fulfilled 失敗 rejected 等待 pending
    pending -> fulfilled
    pending -> rejected
    一旦狀態確定就不可更改
  3. resolve和reject函數是用來更改狀態的
    resolve: fulfilled
    reject: rejected
  4. then方法內部做的事情就判斷狀態 如果狀態是成功 調用成功的回調函數 如果狀態是失敗 調用失敗回調函數 then方法是被定義在原型對象中的
  5. then成功回調有一個參數 表示成功之後的值 then失敗回調有一個參數 表示失敗後的原因
  6. 同一個promise對象下麵的then方法是可以被調用多次的
  7. then方法是可以被鏈式調用的, 後面then方法的回調函數拿到值的是上一個then方法的回調函數的返回值
*/

const MyPromise = require('./myPromise');

function p1 () {
  return new MyPromise(function (resolve, reject) {
    setTimeout(function () {
      resolve('p1')
    }, 2000)
  })
}
function p2 () {
  return new MyPromise(function (resolve, reject) {
    reject('失敗')
    // resolve('成功');  
  })
}

p2()
  .then(value => console.log(value))
  .catch(reason => console.log(reason))

// myPromise.js
const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失敗

class MyPromise {
  constructor (executor) {
    try {
      executor(this.resolve, this.reject)
    } catch (e) {
      this.reject(e);
    }
  }
  // promsie 狀態 
  status = PENDING;
  // 成功之後的值
  value = undefined;
  // 失敗後的原因
  reason = undefined;
  // 成功回調
  successCallback = [];
  // 失敗回調
  failCallback = [];

  resolve = value => {
    // 如果狀態不是等待 阻止程式向下執行
    if (this.status !== PENDING) return;
    // 將狀態更改為成功
    this.status = FULFILLED;
    // 保存成功之後的值
    this.value = value;
    // 判斷成功回調是否存在 如果存在 調用
    // this.successCallback && this.successCallback(this.value);
    while(this.successCallback.length) this.successCallback.shift()()
  }
  reject = reason => {
    // 如果狀態不是等待 阻止程式向下執行
    if (this.status !== PENDING) return;
    // 將狀態更改為失敗
    this.status = REJECTED;
    // 保存失敗後的原因
    this.reason = reason;
    // 判斷失敗回調是否存在 如果存在 調用
    // this.failCallback && this.failCallback(this.reason);
    while(this.failCallback.length) this.failCallback.shift()()
  }
  then (successCallback, failCallback) {
    // 參數可選
    successCallback = successCallback ? successCallback : value => value;
    // 參數可選
    failCallback = failCallback ? failCallback: reason => { throw reason };
    let promsie2 = new MyPromise((resolve, reject) => {
      // 判斷狀態
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            // 判斷 x 的值是普通值還是promise對象
            // 如果是普通值 直接調用resolve 
            // 如果是promise對象 查看promsie對象返回的結果 
            // 再根據promise對象返回的結果 決定調用resolve 還是調用reject
            resolvePromise(promsie2, x, resolve, reject)
          }catch (e) {
            reject(e);
          }
        }, 0)
      }else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            // 判斷 x 的值是普通值還是promise對象
            // 如果是普通值 直接調用resolve 
            // 如果是promise對象 查看promsie對象返回的結果 
            // 再根據promise對象返回的結果 決定調用resolve 還是調用reject
            resolvePromise(promsie2, x, resolve, reject)
          }catch (e) {
            reject(e);
          }
        }, 0)
      } else {
        // 等待
        // 將成功回調和失敗回調存儲起來
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              // 判斷 x 的值是普通值還是promise對象
              // 如果是普通值 直接調用resolve 
              // 如果是promise對象 查看promsie對象返回的結果 
              // 再根據promise對象返回的結果 決定調用resolve 還是調用reject
              resolvePromise(promsie2, x, resolve, reject)
            }catch (e) {
              reject(e);
            }
          }, 0)
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              let x = failCallback(this.reason);
              // 判斷 x 的值是普通值還是promise對象
              // 如果是普通值 直接調用resolve 
              // 如果是promise對象 查看promsie對象返回的結果 
              // 再根據promise對象返回的結果 決定調用resolve 還是調用reject
              resolvePromise(promsie2, x, resolve, reject)
            }catch (e) {
              reject(e);
            }
          }, 0)
        });
      }
    });
    return promsie2;
  }
  finally (callback) {
    return this.then(value => {
      return MyPromise.resolve(callback()).then(() => value);
    }, reason => {
      return MyPromise.resolve(callback()).then(() => { throw reason })
    })
  }
  catch (failCallback) {
    return this.then(undefined, failCallback)
  }
  static all (array) {
    let result = [];
    let index = 0;
    return new MyPromise((resolve, reject) => {
      function addData (key, value) {
        result[key] = value;
        index++;
        if (index === array.length) {
          resolve(result);
        }
      }
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          // promise 對象
          current.then(value => addData(i, value), reason => reject(reason))
        }else {
          // 普通值
          addData(i, array[i]);
        }
      }
    })
  }
  static resolve (value) {
    if (value instanceof MyPromise) return value;
    return new MyPromise(resolve => resolve(value));
  }
}

function resolvePromise (promsie2, x, resolve, reject) {
  if (promsie2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if (x instanceof MyPromise) {
    // promise 對象
    // x.then(value => resolve(value), reason => reject(reason));
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}

module.exports = MyPromise;

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HMS Core 3D Engine是一款高性能、高畫質、高可靠的實時3D引擎,旨在幫助開發者製作高品質的3D應用。3D Engine將為您提供可編程渲染管線,多維粒子系統,3D角色與動畫,超大地形地貌,智能尋路導航等諸多實用功能,以及便捷高效的可視化開發工具。 3D Engine渲染效果 千萬級面 ...
  • 針對傳統記憶體方案及管理機制的不足,OpenHarmony 構建了一套完善的記憶體解決方案——ESWAP。 ...
  • 本期 OpenHarmony 開發者故事,我們採訪了 OpenHarmony 啟動子系統的負責人,OpenHarmony PMC 委員會推舉的“代碼貢獻月度之星”——熊磊。 ...
  • 5月17日,2022年搜狐科技峰會成功舉辦,峰會匯聚各界大咖,共同探討AI 技術的深入應用以及行業數字化的發展趨勢。華為終端雲服務應用生態BU總裁望岳發表題為《使能AI智慧體驗,共建創新應用生態》主題演講。 望岳表示,經過多年的發展迭代,華為移動服務HMS生態已成為全球第三大移動應用生態:截止今天, ...
  • 5月18日(周三)晚上19:00,第一期戰“碼”先鋒直播,我們邀請到了潤和資深軟體開發工程師趙海鵬老師,在直播間與大家分享《如何成為一名優秀的OpenHamrony 貢獻者?》 ...
  • HUAWEI Developer Day(簡稱HDD),是華為開發者聯盟與廣大開發者深度交流的平臺。圍繞移動終端的最新技術和產品形態,持續向廣大開發者傳遞華為終端的最新產品和開放服務能力,結合最新的行業發展趨勢,攜手開發者共同打造面向終端消費者的卓越用戶體驗。 5月24日18:50-21:05,HD ...
  • 本文對 CSS 中有關大小的四種自適應大小表現進行瞭解釋與區別,它們分別是 fit-content, min-content, max-content, fill-available。相對而言,本文較為嚴謹,即儘量地無遺漏、無歧義。在嚴謹的同時,也做到儘可能通俗易懂。 ...
  • BOM BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 BOM就是瀏覽器對象模型 BOM提供了一些獨立於內容頁面與瀏覽器視窗進行交互的對象介面 BOM的核心是window對象,所以window一般在書寫時是可以省略的. BOM其實 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文將以 C# 語言來實現一個簡單的布隆過濾器,為簡化說明,設計得很簡單,僅供學習使用。 感謝@時總百忙之中的指導。 布隆過濾器簡介 布隆過濾器(Bloom filter)是一種特殊的 Hash Table,能夠以較小的存儲空間較快地判斷出數據是否存在。常用於允許一定誤判率的數據過濾及防止緩存 ...
  • 目錄 一.簡介 二.效果演示 三.源碼下載 四.猜你喜歡 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 轉場 零基礎 O ...
  • 「簡單有價值的事情長期堅持做」 這是成功最簡單,但也最難學的秘訣。不經過訓練,人很難意識到時間複利的威力。 仙劍奇俠傳的「十里坡劍神」和金庸群俠傳的「十級野球拳」,就是簡單的事情持之以恆反覆做,最後就有巨大的威力 唐家三少成為網文收入第一,最重要的一步是十四年從未斷日更 這樣的案例很多,一開始可能成 ...
  • 迎面走來了你的面試官,身穿格子衫,挺著啤酒肚,髮際線嚴重後移的中年男子。 手拿泡著枸杞的保溫杯,胳膊夾著MacBook,MacBook上還貼著公司標語:“我愛加班”。 面試開始,直入正題。 面試官: 看你簡歷上面寫著精通MySQL,我先問你事務的特性是什麼? 老生常談,這個還有誰不會背的嗎? 我: ...
  • 基礎知識 python是一門腳本語言,它是解釋執行的。 python使用縮進做為語法,而且python2環境下同一個py文件中不能同時存在tab和空格縮進,否則會出錯,建議在IDE中顯示縮進符。 python在聲明變數時不寫數據類型,可以type(xx)來獲取欄位的類型,然後可以int(),list ...
  • 為什麼要多線程下載 俗話說要以終為始,那麼我們首先要明確多線程下載的目標是什麼,不外乎是為了更快的下載文件。那麼問題來了,多線程下載文件相比於單線程是不是更快? 對於這個問題可以看下圖。 橫坐標是線程數,縱坐標是使用對應線程數下載對應文件時花費的時間,藍橙綠代表下載文件的大小,每個線程下載對應文件2 ...
  • 詳細講解python爬蟲代碼,爬微博搜索結果的博文數據。 爬取欄位: 頁碼、微博id、微博bid、微博作者、發佈時間、微博內容、轉發數、評論數、點贊數。 爬蟲技術: 1、requests 發送請求 2、datetime 時間格式轉換 3、jsonpath 快速解析json數據 4、re 正則表達式提... ...
  • 背景: 一般我們可以用HashMap做本地緩存,但是HashMap功能比較弱,不支持Key過期,不支持數據範圍查找等。故在此實現了一個簡易的本地緩存,取名叫fastmap。 功能: 1.支持數據過期 2.支持等值查找 3.支持範圍查找 4.支持key排序 實現思路: 1.等值查找採用HashMap2 ...
  • 目錄 一.簡介 二.效果演示 三.源碼下載 四.猜你喜歡 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 轉場 零基礎 O ...
  • 本章是系列文章的第八章,用著色演算法進行寄存器的分配過程。 本文中的所有內容來自學習DCC888的學習筆記或者自己理解的整理,如需轉載請註明出處。周榮華@燧原科技 寄存器分配 寄存器分配是為程式處理的值找到存儲位置的問題 這些值可以存放到寄存器,也可以存放在記憶體中 寄存器更快,但數量有限 記憶體很多,但 ...