40行js實現一個簡易Promise

nihao 發布于2019-08-22 15:13 / 500人閱讀

摘要：最近面試有問到的原理，以及實現的方法。所以自己動手實現了一個，發個文章記錄下。簡單分析下，實例對象有兩個屬性，一個是，一個是。

最近面試有問到Promise的原理，以及實現的方法。所以自己動手實現了一個，發個文章記錄下。
簡單分析下，promise實例對象有兩個屬性，一個是status，一個是value。還有一個then方法。
status有3個狀態，pending,resolved,rejected。value就是then回調的時候傳的值。
下面是代碼

/* 
  原生js模擬promise
*/
const PromisePolyfill = (() => {
    //狀態管理
    const promiseStatusSymbol = Symbol("PromiseStatus");
    const promiseValueSymbol = Symbol("PromiseValue");
    const STATUS = {
        PENDING: "PENDING",
        FULFILLED: "FULFILLED",
        REJECTED: "REJECTED"
    };
    //resolve操作設置值和狀態
    function resolve() {
        this[promiseValueSymbol] = arguments[0];
        this[promiseStatusSymbol] = STATUS["FULFILLED"];
    }
    //reject操作設置值和狀態
    function reject() {
        this[promiseValueSymbol] = arguments[0];
        this[promiseStatusSymbol] = STATUS["REJECTED"];
    }

    class myPromise {
        constructor(resolver) {
            if (typeof resolver !== "function") {
                throw new TypeError(`parameter 1 must be a function, but get a ${typeof func}`);
            }
            this[promiseStatusSymbol] = STATUS["PENDING"];//初始狀態為pending
            resolver(
                resolve.bind(this),//綁定promise實例對象
                reject.bind(this)
            );
        }
        then(callback) {
            //開一個定時器監聽狀態變化，如果有變化則執行callback
            const interval = setInterval(() => {
                if (this[promiseStatusSymbol] === "FULFILLED" || this[promiseStatusSymbol] === "REJECTED") {
                    clearInterval(interval);
                    callback(this[promiseValueSymbol], resolve.bind(this), reject.bind(this));
                    this[promiseStatusSymbol] = "PENDING";//執行完后把狀態改回，方便下一個then方法進行定時輪詢
                }
            });
            return this;
        }
    }
    return myPromise;
})();

寫完了丟到控制臺測試，完美預期運行

//測試，下面會先打印出111，再打印出222，333
new PromisePolyfill(function (resolve, reject) {
    setTimeout(() => {
        resolve(222);
        console.log(111)
    }, 1000);
}).then(function (res, resolve, reject) {
    setTimeout(() => {
        resolve(333);
        console.log(res)
    }, 3000);
}).then(function (res, resolve, reject) {
    console.log(res);
});

代碼github地址：https://github.com/leeseean/P...

云服務器 GPU云服務器 js簡易留言板實現用js或jquery實現添加行 jquery_promise實現原生js簡易日歷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93277.html

3行代碼實現一個簡易版promise

前言作為一個后端過來的同學,剛入門前端的時候,被js種種「反人類」的概念折騰的死去活來的.其中一個印象比較深刻的,就是promise,感覺實在太難理解了...所有就有了寫個簡單的promise的想法.希望能幫助到一些跟我一樣,感覺promise很難理解的新同學. promise的教程網上多如牛毛,其中寫的比較通俗易懂的莫過于阮一峰的es6,反正我是他的書才懂的.所以今天,我們也不會來復述一遍如何...

ralap 2019-08-22 17:33 評論0 收藏0
Browserify簡易入坑指南

摘要：簡要說明長處在于使用模塊規范，而不是使用的模塊規范，以及使用的模塊規范。簡單使用關于命令行工具使用，請參照官方文檔。相同模塊重復依賴模塊重復依賴很容易理解，模塊實現時可能分割為多個子文件實現，每個子文件內部可能會引用同一個模塊，如。簡介 browerify: http://browserify.org/index.html browserify可以看做瀏覽器端的又一個模塊...

vpants 2019-08-21 10:30 評論0 收藏0
【js】what is Promise和手寫實現簡易版Promise

摘要：有三種狀態，等待中，已完成，已失敗。對象狀態不受外界影響，只有異步操作的結果可以改變狀態，這就是的由來怎么用接受一個函數作為參數，這個參數函數的兩個參數分別是和，用來執行了兩種狀態的回調函數。當實例生成后，用方法來指定兩種狀態的回調函數。什么是Promise 官方的解釋：Promise是一個用來傳遞異步操作消息的對象。Promise有三種狀態，pending（等待中），resolve...

LMou 2019-08-23 18:25 評論0 收藏0
nodeJS實現基于Promise爬蟲定時發送信息到指定郵件

摘要：也就是說，我的篇文章的請求對應個實例，這些實例都請求完畢后，執行以下邏輯他的目的在于對每一個返回值這個返回值為單篇文章的內容，進行方法處理。英國人Robert Pitt曾在Github上公布了他的爬蟲腳本，導致任何人都可以容易地取得Google Plus的大量公開用戶的ID信息。至今大概有2億2千5百萬用戶ID遭曝光。亮點在于，這是個nodejs腳本，非常短，包括注釋只有71行。 ...

xuweijian 2019-08-20 15:27 評論0 收藏0
2019 簡易Web開發指南

摘要：工具軟件欲先攻其事必先利其器，用好工具是做好開發的基礎。框架目前最流行簡單易用，越來越多人用曾經很流行，現在有點衰退狀態管理后端渲染開發工具依賴管理，應用打包，任務管理，編輯器擴展，，移動端有了前端的知識后，我們還可以開發手機。 2019年即將到來，各位同學2018年辛苦了。不管大家2018年過的怎么樣，2019年還是要繼續加油的！在此我整理了個人認為在2019仍是或者將成為主流的...

vspiders 2019-05-28 17:11 評論0 收藏0