手把手教你實現一個Promise

Charlie_Jade 發布于2019-08-23 16:31 / 2568人閱讀

摘要：因為你的可以返回任何職，當然包括對象，而如果是對象，我們就需要將他拆解，直到它不是一個對象，取其中的值。該方法是引入標準的。大家一定都看到過這兩種用法，它們的作用其實就是返回一個對象，我們來實現一下。我們來實現一下吧。

1、constructor

首先我們都知道Promise 有三個狀態，為了方便我們把它定義成常量

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

接下來我們來定義一個類

class MyPromise {
    constructor(executor) {
        //控制狀態，使用了一次之后，接下來的都不被使用
        this.state = PENDING;
        this.value = null;
        this.reason = null;
        
        // 定義resolve函數
        const resolve = value => {
            if (this.state === PENDING) {
                this.value = value;
                this.state = FULFILLED;
            }
        }
        
        // 定義reject函數
        const reject = value => {
            if (this.state === PENDING) {
                this.reason = value;
                this.state = REJECTED;
            }
        }
        
        // executor方法可能會拋出異常，需要捕獲
        try {
             // 將resolve和reject函數給使用者  
            executor(resolve, reject);
        } catch (error) {
            // 如果在函數中拋出異常則將它注入reject中
            reject(error);
        }
    }
}

到這基本比較好理解我簡單說明一下

executor：這是實例Promise對象時在構造器中傳入的參數，一般是一個function(resolve,reject){}

state：`Promise的狀態，一開始是默認的pendding狀態，每當調用道resolve和reject方法時，就會改變其值，在后面的then`方法中會用到

value：resolve回調成功后，調用resolve方法里面的參數值

reason：reject回調成功后，調用reject方法里面的參數值

resolve：聲明resolve方法在構造器內，通過傳入的executor方法傳入其中，用以給使用者回調

reject：聲明reject方法在構造器內，通過傳入的executor方法傳入其中，用以給使用者回調

2、then

then就是將Promise中的resolve或者reject的結果拿到，那么我們就能知道這里的then方法需要兩個參數，成功回調和失敗回調，上代碼！

then(onFulfilled, onRejected) {
    if (this.state === FULFILLED) {
        onFulfilled(this.value)
    }
    if (this.state === REJECTED) {
        onRejected(this.reason)
    }
}

我們來簡單的運行一下測試代碼

const mp = new MyPromise((resolve, reject)=> {
    resolve("******* i love you *******");
})
mp.then((suc)=> {
console.log(11111, suc);
}, (err)=> {
console.log("****** 你不愛我了*******", err)
})

// 11111 "******* i love you *******"

這樣看著好像沒有問題，那么我們來試試異步函數呢？

const mp = new MyPromise((resolve, reject)=> {
    setTimeout(()=> {
        resolve("******* i love you *******");
    }, 0)
})
mp.then((suc)=> {
console.log(11111, suc);
}, (err)=> {
console.log("****** 你不愛我了*******", err)
})

我們會發現什么也沒有打印，哪里出問題了呢？原來是由于異步的原因，當我們執行到then的時候this. state的值還沒發生改變，所以then里面的判斷就失效了。那么我們該怎么解決呢？

這就要說回經典得callback 了。來上源碼

// 存放成功回調的函數
this.onFulfilledCallbacks = [];
// 存放失敗回調的函數
this.onRejectedCallbacks = [];

const resolve = value => {
    if (this.state === PENDING) {
        this.value = value;
        this.state = FULFILLED;
        this.onFulfilledCallbacks.map(fn => fn());
    }
}

const reject = value => {
    if (this.state === PENDING) {
        this.value = value;
        this.reason = REJECTED;
        this.onRejectedCallbacks.map(fn => fn());
    }
}

在then里面添加

then(onFulfilled, onRejected) {
    // ... 
    if(this.state === PENDING) {
        this.onFulfilledCallbacks.push(()=> {
            onFulfilled(this.value);
        });
        this.onRejectedCallbacks.push(()=> {
            onRejected(this.value);
        })
    }
}

好了，到這異步的問題解決了，我們再來執行一下剛才的測試代碼。結果就出來了。到這我們還缺什么呢？

鏈式調用

當我們不傳參數時應當什么運行

這二個的思路也都很簡單，鏈式調用也就是說我們再返回一個promise的實例就好了。而不傳參則就是默認值的問題了。下面來看源碼

then(onFulfilled, onRejected) {
    let self = this;
    let promise2 = null;
    //解決onFulfilled,onRejected沒有傳值的問題
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : y => y
    //因為錯誤的值要讓后面訪問到，所以這里也要跑出個錯誤，不然會在之后then的resolve中捕獲
    onRejected = typeof onRejected === "function" ? onRejected : err => {
        throw err;
    }

    promise2 = new MyPromise((resolve, reject) => {
        if (self.state === PENDING) {
            console.log("then PENDING")
            self.onFulfilledCallbacks.push(() => {
                setTimeout(() => {
                    try {
                        let x = onFulfilled(self.value);
                    console.log(333333, x, typeof x);
                        self.resolvePromise(promise2, x, resolve, reject);
                    } catch (reason) {
                        reject(reason);
                    }
                }, 0)

            });
            self.onRejectedCallbacks.push(() => {
                setTimeout(() => {
                    try {
                        let x = onRejected(self.reason);
                        self.resolvePromise(promise2, x, resolve, reject);
                    } catch (reason) {
                        reject(reason);
                    }
                }, 0);
            });
        }

        if (self.state === FULFILLED) {
            console.log("then FULFILLED")
            setTimeout(() => {
                try {
                    let x = onFulfilled(self.value);
                    self.resolvePromise(promise2, x, resolve, reject);
                } catch (reason) {
                    reject(reason);
                }
            }, 0);
        }

        if (self.state === REJECTED) {
            console.log("then REJECTED")
            setTimeout(() => {
                try {
                    let x = onRejected(self.reason);
                    self.resolvePromise(promise2, x, resolve, reject);
                } catch (reason) {
                    reject(reason);
                }
            })
        }
    });

    return promise2;
}

為什么外面要包一層setTimeout？：因為Promise本身是一個異步方法，屬于微任務一列，必須得在執行棧執行完了在去取他的值，所以所有的返回值都得包一層異步setTimeout。

resolvePromise是什么？：這其實是官方Promise/A+的需求。因為你的then可以返回任何職，當然包括Promise對象，而如果是Promise對象，我們就需要將他拆解，直到它不是一個Promise對象，取其中的值。

3、resolvePromise

我們直接看代碼

resolvePromise(promise2, x, resolve, reject) {
    let self = this;
    let called = false; // called 防止多次調用
    //因為promise2是上一個promise.then后的返回結果，所以如果相同，會導致下面的.then會是同一個promise2，一直都是，沒有盡頭
    //相當于promise.then之后return了自己，因為then會等待return后的promise，導致自己等待自己，一直處于等待
    if (promise2 === x) {
        return reject(new TypeError("循環引用"));
    }
    //如果x不是null，是對象或者方法
    if (x !== null && (Object.prototype.toString.call(x) === "[object Object]" || Object.prototype.toString.call(x) === "[object Function]")) {
        // x是對象或者函數
        try {
            let then = x.then;

            if (typeof then === "function") {
                then.call(x, (y) => {
                    // 別人的Promise的then方法可能設置了getter等，使用called防止多次調用then方法
                    if (called) return;
                    called = true;
                    // 成功值y有可能還是promise或者是具有then方法等，再次resolvePromise，直到成功值為基本類型或者非thenable
                    self.resolvePromise(promise2, y, resolve, reject);
                }, (reason) => {
                    if (called) return;
                    called = true;
                    reject(reason);
                });
            } else {
                if (called) return;
                called = true;
                resolve(x);
            }
        } catch (reason) {
            if (called) return;
            called = true;
            reject(reason);
        }
    } else {
        // x是普通值，直接resolve
        resolve(x);
    }
}

為什么要在一開始判斷promise2和x？：首先在Promise/A+中寫了需要判斷這兩者如果相等，需要拋出異常，我就來解釋一下為什么，如果這兩者相等，我們可以看下下面的例子，第一次p2是p1.then出來的結果是個Promise對象，這個Promise對象在被創建的時候調用了resolvePromise(promise2,x,resolve,reject)函數，又因為x等于其本身，是個Promise，就需要then方法遞歸它，直到他不是Promise對象，但是x（p2）的結果還在等待，他卻想執行自己的then方法，就會導致等待。

為什么要遞歸去調用resolvePromise函數？：相信細心的人已經發現了，我這里使用了遞歸調用法，首先這是Promise/A+中要求的，其次是業務場景的需求，當我們碰到那種Promise的resolve里的Promise的resolve里又包了一個Promise的話，就需要遞歸取值，直到x不是Promise對象。

4、catch

//catch方法
catch(onRejected){
  return this.then(null,onRejected)
}

5、finally

finally方法用于指定不管 Promise 對象最后狀態如何，都會執行的操作。該方法是 ES2018 引入標準的。

finally(fn) {
    return this.then(value => {
        fn();
        return value;
    }, reason => {
        fn();
        throw reason;
    });
};

6、resolve/reject

大家一定都看到過Promise.resolve()、Promise.reject()這兩種用法，它們的作用其實就是返回一個Promise對象，我們來實現一下。

static resolve(val) {
    return new MyPromise((resolve, reject) => {
        resolve(val)
    })
}
//reject方法
static reject(val) {
    return new MyPromise((resolve, reject) => {
        reject(val)
    })
}

7、all

all方法可以說是Promise中很常用的方法了，它的作用就是將一個數組的Promise對象放在其中，當全部resolve的時候就會執行then方法，當有一個reject的時候就會執行catch，并且他們的結果也是按著數組中的順序來排放的，那么我們來實現一下。

static all(promiseArr) {
    return new MyPromise((resolve, reject) => {
        let result = [];

        promiseArr.forEach((promise, index) => {
            promise.then((value) => {
                result[index] = value;

                if (result.length === promiseArr.length) {
                    resolve(result);
                }
            }, reject);
        });
    });
}

8、race

race方法雖然不常用，但是在Promise方法中也是一個能用得上的方法，它的作用是將一個Promise數組放入race中，哪個先執行完，race就直接執行完，并從then中取值。我們來實現一下吧。

static race(promiseArr) {
    return new MyPromise((resolve, reject) => {
        promiseArr.forEach(promise => {
            promise.then((value) => {
                resolve(value);
            }, reject);
        });
    });
}

9、deferred

static deferred() {
    let dfd = {};
    dfd.promies = new MyPromise((resolve, reject) => {
        dfd.resolve = resolve;
        dfd.rfeject = reject;
    });
    return dfd;
};

什么作用呢？看下面代碼你就知道了

let fs = require("fs")
let MyPromise = require("./MyPromise")
//Promise上的語法糖，為了防止嵌套，方便調用
//壞處 錯誤處理不方便
function read(){
  let defer = MyPromise.defer()
  fs.readFile("./1.txt","utf8",(err,data)=>{
    if(err)defer.reject(err)
    defer.resolve(data)
  })
  return defer.Promise
}

10、測試

const mp1 = MyPromise.resolve(1);
const mp2 = MyPromise.resolve(2);
const mp3 = MyPromise.resolve(3);
const mp4 = MyPromise.reject(4);

MyPromise.all([mp1, mp2, mp3]).then(x => {
    console.log(x);
}, (err) => {
    console.log("err1", err);
})
MyPromise.race([mp1, mp4, mp2, mp3]).then(x => {
    console.log(x);
}, (err) => {
    console.log("err2", err);
})

var mp = new MyPromise((resolve, reject) => {
    console.log(11111);
    setTimeout(() => {
        resolve(22222);
        console.log(3333);
    }, 1000);
});
mp.then(x => {
    console.log(x);
}, (err) => {
    console.log("err2", err);
})
//11111
//[ 1, 2, 3 ]
//1
//3333
//22222

完整源碼請查看

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

云服務器 GPU云服務器手把手教你做圖像識別手把手教你阿里云服務器搭建商城 jquery_promise實現一個教你開發小程序的小程序

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

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

#yyds干貨盤點#學不懂Netty？看不懂源碼？不存在的，這篇文章手把手帶你閱讀Netty源碼

摘要：簡單來說就是把注冊的動作異步化，當異步執行結束后會把執行結果回填到中抽象類一般就是公共邏輯的處理，而這里的處理主要就是針對一些參數的判斷，判斷完了之后再調用方法。閱讀這篇文章之前，建議先閱讀和這篇文章關聯的內容。 1. 詳細剖析分布式微服務架構下網絡通信的底層實現原理（圖解） 2. (年薪60W的技巧)工作了5年，你真的理解Netty以及為什么要用嗎？（深度干貨）...

zsirfs 2021-11-23 10:11 評論0 收藏0
手把手教你搭建SSR(vue/vue-cli + express)

摘要：最近簡單的研究了一下，對已經有了一個簡單的認知，主要應用于單頁面應用，是很不錯的框架。創建好之后，在命令行直接輸入即可，當控制臺顯示服務已啟動則表示該服務已經啟動成功了。配置參數中有一項為這項配置的就是我們即將使用的模板。最近簡單的研究了一下SSR，對SSR已經有了一個簡單的認知，主要應用于單頁面應用，Nuxt是SSR很不錯的框架。也有過調研，簡單的用了一下，感覺還是很不錯。但是還是...

liangdas 2019-08-23 18:05 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

hellowoody 2019-08-22 14:02 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

wwolf 2019-08-29 14:21 評論0 收藏0