1. 程式人生 > 其它 >手寫一個 Promise

手寫一個 Promise

const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";
function MyPromise(fn) {
    // 儲存初始化狀態
    var self = this;
    // 初始化狀態
    this.state = PENDING;
    // 用於儲存 resolve 或者 rejected 傳入的值
    this.value = null;
    // 用於儲存 resolve 的回撥函式
    this.resolvedCallbacks = [];
    
// 用於儲存 reject 的回撥函式 this.rejectedCallbacks = []; // 狀態轉變為 resolved 方法 function resolve(value) { // 判斷傳入元素是否為 Promise 值,如果是,則狀態改變必須等待前一個狀態改變後再 進行改變 if (value instanceof MyPromise) { return value.then(resolve, reject); } // 保證程式碼的執行順序為本輪事件迴圈的末尾 setTimeout(() => {
// 只有狀態為 pending 時才能轉變, if (self.state === PENDING) { // 修改狀態 self.state = RESOLVED; // 設定傳入的值 self.value = value; // 執行回撥函式 self.resolvedCallbacks.forEach((callback) => { callback(value); }); } },
0); } // 狀態轉變為 rejected 方法 function reject(value) { // 保證程式碼的執行順序為本輪事件迴圈的末尾 setTimeout(() => { // 只有狀態為 pending 時才能轉變 if (self.state === PENDING) { // 修改狀態 self.state = REJECTED; // 設定傳入的值 self.value = value; // 執行回撥函式 self.rejectedCallbacks.forEach((callback) => { callback(value); }); } }, 0); } // 將兩個方法傳入函式執行 try { fn(resolve, reject); } catch (e) { // 遇到錯誤時,捕獲錯誤,執行 reject 函式 reject(e); } } MyPromise.prototype.then = function (onResolved, onRejected) { // 首先判斷兩個引數是否為函式型別,因為這兩個引數是可選引數 onResolved = typeof onResolved === "function" ? onResolved : function (value) { return value; }; onRejected = typeof onRejected === "function" ? onRejected : function (error) { throw error; }; // 如果是等待狀態,則將函式加入對應列表中 if (this.state === PENDING) { this.resolvedCallbacks.push(onResolved); this.rejectedCallbacks.push(onRejected); } // 如果狀態已經凝固,則直接執行對應狀態的函式 if (this.state === RESOLVED) { onResolved(this.value); } if (this.state === REJECTED) { onRejected(this.value); } };