通過手寫 Promise，可以使我們深入理解它的內(nèi)部工作原理。這有助于更好地理解異步編程、回調(diào)、事件循環(huán)等概念。
手寫一個(gè) Promise 的過程可以分為以下幾個(gè)關(guān)鍵步驟：
1. 創(chuàng)建 Promise 構(gòu)造函數(shù)
首先，你需要?jiǎng)?chuàng)建一個(gè) Promise 構(gòu)造函數(shù)。這個(gè)構(gòu)造函數(shù)接受一個(gè) executor 函數(shù)，這個(gè)函數(shù)有兩個(gè)參數(shù)：resolve 和 reject，它們用于將 Promise 從 pending 狀態(tài)轉(zhuǎn)換為 fulfilled 或 rejected 狀態(tài)。
2. 定義 Promise 的狀態(tài)和值
在構(gòu)造函數(shù)中，你需要定義 Promise 的狀態(tài)（初始為 pending）和值。狀態(tài)表示 Promise 的當(dāng)前狀態(tài)（pending、fulfilled、rejected），值表示 Promise 的最終結(jié)果值（成功時(shí)是結(jié)果值，失敗時(shí)是錯(cuò)誤原因）。
3. 實(shí)現(xiàn) resolve 和 reject 函數(shù)
在構(gòu)造函數(shù)中，你需要實(shí)現(xiàn) resolve 和 reject 函數(shù)，它們用于將 Promise 從 pending 轉(zhuǎn)換為 fulfilled 或 rejected 狀態(tài)。當(dāng)調(diào)用 resolve(value) 時(shí)，Promise 狀態(tài)變?yōu)?fulfilled，并將 value 存儲為結(jié)果值；當(dāng)調(diào)用 reject(reason) 時(shí)，Promise 狀態(tài)變?yōu)?rejected，并將 reason 存儲為錯(cuò)誤原因。
4. 處理異步操作
在 executor 函數(shù)中，通常會(huì)包含異步操作，例如網(wǎng)絡(luò)請求、定時(shí)器等。你需要確保在異步操作完成后，調(diào)用 resolve 或 reject 函數(shù)來改變 Promise 的狀態(tài)。
5. 實(shí)現(xiàn) then 方法
then 方法是 Promise 實(shí)例的核心方法，它用于注冊成功和失敗的回調(diào)函數(shù)，以便在狀態(tài)變?yōu)?fulfilled 或 rejected 時(shí)執(zhí)行相應(yīng)的操作。在 then 方法中，你需要考慮以下幾點(diǎn)：
- 如果 Promise 的狀態(tài)已經(jīng)是 fulfilled，則立即執(zhí)行成功回調(diào)。
- 如果 Promise 的狀態(tài)已經(jīng)是 rejected，則立即執(zhí)行失敗回調(diào)。
- 如果 Promise 的狀態(tài)是 pending，則將成功和失敗回調(diào)分別添加到回調(diào)隊(duì)列中，等待狀態(tài)改變后執(zhí)行。
6. 支持鏈?zhǔn)秸{(diào)用
你需要返回一個(gè)新的 Promise 對象，以支持鏈?zhǔn)秸{(diào)用。這是通過在 then 方法內(nèi)創(chuàng)建并返回一個(gè)新的 Promise 對象來實(shí)現(xiàn)的。
7. 處理回調(diào)返回值
在 then 方法中，你需要處理成功回調(diào)和失敗回調(diào)的返回值。如果返回值是一個(gè) Promise，需要等待這個(gè) Promise 的狀態(tài)變化，并根據(jù)其狀態(tài)來決定新 Promise 的狀態(tài)。如果返回值不是 Promise，直接將其作為新 Promise 的值。
8. 實(shí)現(xiàn) catch 方法
catch 方法是 then 方法的一種簡化形式，用于注冊失敗回調(diào)。你可以在 catch 方法內(nèi)部調(diào)用 then(null, onRejected) 來實(shí)現(xiàn)。
9. 實(shí)現(xiàn)靜態(tài)方法
你可以為 Promise 添加靜態(tài)方法，如 Promise.resolve 和 Promise.reject，以便創(chuàng)建已解決或已拒絕的 Promise。另外，你還可以實(shí)現(xiàn) Promise.all 和 Promise.race 等靜態(tài)方法，用于處理多個(gè) Promise 實(shí)例。
10. 錯(cuò)誤處理
在所有涉及到異步操作的地方，要確保捕獲異常并將其傳遞給 reject 函數(shù)，以便在 Promise 失敗時(shí)能夠正確處理錯(cuò)誤。
以下是完整的代碼示例：
class MyPromise {
constructor(executor) {
// 初始化 Promise 的狀態(tài)為 pending
this.state = 'pending';
// 初始化 Promise 的結(jié)果值
this.value = undefined;
// 初始化 Promise 的拒因（錯(cuò)誤原因）
this.reason = undefined;
// 初始化成功和失敗的回調(diào)隊(duì)列
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
// 定義 resolve 函數(shù)，用于將 Promise 狀態(tài)從 pending 變?yōu)?fulfilled
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
// 依次執(zhí)行成功回調(diào)函數(shù)
this.onFulfilledCallbacks.forEach(callback => callback(this.value));
}
};
// 定義 reject 函數(shù)，用于將 Promise 狀態(tài)從 pending 變?yōu)?rejected
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
// 依次執(zhí)行失敗回調(diào)函數(shù)
this.onRejectedCallbacks.forEach(callback => callback(this.reason));
}
};
try {
// 執(zhí)行用戶傳入的執(zhí)行器函數(shù)，并傳入 resolve 和 reject 函數(shù)
executor(resolve, reject);
} catch (error) {
// 如果執(zhí)行器函數(shù)拋出異常，將 Promise 狀態(tài)置為 rejected
reject(error);
}
}
then(onFulfilled, onRejected) {
// 創(chuàng)建一個(gè)新的 Promise 對象
return new MyPromise((resolve, reject) => {
// 封裝成功時(shí)執(zhí)行的函數(shù)
const onFulfilledHandler = (value) => {
try {
// 如果 onFulfilled 不是函數(shù)，則將結(jié)果傳遞給下一個(gè) Promise
if (typeof onFulfilled === 'function') {
const result = onFulfilled(value);
this.resolvePromise(result, resolve, reject);
} else {
resolve(value);
}
} catch (error) {
reject(error);
}
};
// 封裝失敗時(shí)執(zhí)行的函數(shù)
const onRejectedHandler = (reason) => {
try {
// 如果 onRejected 不是函數(shù)，則將錯(cuò)誤傳遞給下一個(gè) Promise
if (typeof onRejected === 'function') {
const result = onRejected(reason);
this.resolvePromise(result, resolve, reject);
} else {
reject(reason);
}
} catch (error) {
reject(error);
}
};
// 根據(jù)當(dāng)前 Promise 的狀態(tài)執(zhí)行不同的處理函數(shù)
if (this.state === 'fulfilled') {
// 當(dāng)前 Promise 已經(jīng)是 fulfilled 狀態(tài)，執(zhí)行成功處理函數(shù)
onFulfilledHandler(this.value);
} else if (this.state === 'rejected') {
// 當(dāng)前 Promise 已經(jīng)是 rejected 狀態(tài)，執(zhí)行失敗處理函數(shù)
onRejectedHandler(this.reason);
} else if (this.state === 'pending') {
// 當(dāng)前 Promise 是 pending 狀態(tài)，將成功和失敗處理函數(shù)分別添加到回調(diào)隊(duì)列
this.onFulfilledCallbacks.push(onFulfilledHandler);
this.onRejectedCallbacks.push(onRejectedHandler);
}
});
}
catch(onRejected) {
return this.then(null, onRejected);
}
resolvePromise(result, resolve, reject) {
if (result === this) {
return reject(new TypeError('Chaining cycle detected'));
}
let called = false;
if (result instanceof MyPromise) {
// 如果返回值是一個(gè) Promise，則等待其狀態(tài)變化
result.then(
value => {
if (called) return;
called = true;
this.resolvePromise(value, resolve, reject);
},
reason => {
if (called) return;
called = true;
reject(reason);
}
);
} else {
// 如果返回值不是 Promise，則直接將其作為新 Promise 的結(jié)果值
resolve(result);
}
}
static resolve(value) {
if (value instanceof MyPromise) return value;
return new MyPromise(resolve => resolve(value));
}
static reject(reason) {
return new MyPromise((resolve, reject) => reject(reason));
}
static all(promises) {
return new MyPromise((resolve, reject) => {
const results = [];
let completed = 0;
if (promises.length === 0) {
resolve(results);
} else {
promises.forEach((promise, index) => {
MyPromise.resolve(promise).then(result => {
results[index] = result;
completed++;
if (completed === promises.length) {
resolve(results);
}
}).catch(reject);
});
}
});
}
static race(promises) {
return new MyPromise((resolve, reject) => {
promises.forEach(promise => {
MyPromise.resolve(promise).then(resolve).catch(reject);
});
});
}
}
示例代碼
// 示例用法
const promise = new MyPromise((resolve, reject) => {
// 異步操作
setTimeout(() => {
resolve('Promise resolved');
// 或者
//reject('Promise rejected');
}, 500);
});
promise
.then(value => {
console.log(value);
return 'New value';
})
.then(value => {
console.log(value);
})
.catch(reason => {
console.error(reason);
});
