Promise的源碼分析
本篇文章不科普Promise,是看了其餘做者寫的Promise源碼實現,通過幾天時間針對固定的實例，大概弄明白了Promise的實現思路，特此來記錄一下本身的想法，有不正確的地方，歡迎指正。javascript
先貼一下我分析的源碼及demohtml
Promise源碼
javascript
/**
* Promise 實現 遵循promise/A+規範
* Promise/A+規範譯文:
* https://malcolmyu.github.io/2015/06/12/Promises-A-Plus/#note-4
*/
// promise 三個狀態
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
function Promise(excutor, name) {
let that = this; // 緩存當前promise實例對象
that.status = PENDING; // 初始狀態
that.value = undefined; // fulfilled狀態時 返回的信息
that.reason = undefined; // rejected狀態時 拒絕的緣由
that.onFulfilledCallbacks = []; // 存儲fulfilled狀態對應的onFulfilled函數
that.onRejectedCallbacks = []; // 存儲rejected狀態對應的onRejected函數
that.name = name;
function resolve(value) { // value成功態時接收的終值
if(value instanceof Promise) {
return value.then(resolve, reject);
}
// 爲何resolve 加setTimeout?
// 2.2.4規範 onFulfilled 和 onRejected 只容許在 execution context 棧僅包含平臺代碼時運行.
// 注1 這裏的平臺代碼指的是引擎、環境以及 promise 的實施代碼。實踐中要確保 onFulfilled 和 onRejected 方法異步執行，且應該在 then 方法被調用的那一輪事件循環以後的新執行棧中執行。
setTimeout(() => {
// 調用resolve 回調對應onFulfilled函數
if (that.status === PENDING) {
// 只能由pending狀態 => fulfilled狀態 (避免調用屢次resolve reject)
that.status = FULFILLED;
that.value = value;
that.onFulfilledCallbacks.forEach(cb => cb(that.value));
}
});
}
function reject(reason) { // reason失敗態時接收的拒因
setTimeout(() => {
// 調用reject 回調對應onRejected函數
if (that.status === PENDING) {
// 只能由pending狀態 => rejected狀態 (避免調用屢次resolve reject)
that.status = REJECTED;
that.reason = reason;
that.onRejectedCallbacks.forEach(cb => cb(that.reason));
}
});
}
// 捕獲在excutor執行器中拋出的異常
// new Promise((resolve, reject) => {
// throw new Error('error in excutor')
// })
try {
excutor(resolve, reject);
} catch (e) {
reject(e);
}
}
/**
* [註冊fulfilled狀態/rejected狀態對應的回調函數]
* @param {function} onFulfilled fulfilled狀態時 執行的函數
* @param {function} onRejected rejected狀態時 執行的函數
* @return {function} newPromsie 返回一個新的promise對象
*/
Promise.prototype.then = function(onFulfilled, onRejected, name) {
const that = this;
let newPromise;
// 處理參數默認值 保證參數後續可以繼續執行
onFulfilled =
typeof onFulfilled === "function" ? onFulfilled : value => value;
onRejected =
typeof onRejected === "function" ? onRejected : reason => {
throw reason;
};
// then裏面的FULFILLED/REJECTED狀態時 爲何要加setTimeout ?
// 緣由:
// 其一 2.2.4規範 要確保 onFulfilled 和 onRejected 方法異步執行(且應該在 then 方法被調用的那一輪事件循環以後的新執行棧中執行) 因此要在resolve里加上setTimeout
// 其二 2.2.6規範 對於一個promise，它的then方法能夠調用屢次.（當在其餘程序中屢次調用同一個promise的then時 因爲以前狀態已經爲FULFILLED/REJECTED狀態，則會走的下面邏輯),因此要確保爲FULFILLED/REJECTED狀態後 也要異步執行onFulfilled/onRejected
// 其二 2.2.6規範 也是resolve函數里加setTimeout的緣由
// 總之都是 讓then方法異步執行 也就是確保onFulfilled/onRejected異步執行
// 以下面這種情景 屢次調用p1.then
// p1.then((value) => { // 此時p1.status 由pending狀態 => fulfilled狀態
// console.log(value); // resolve
// // console.log(p1.status); // fulfilled
// p1.then(value => { // 再次p1.then 這時已經爲fulfilled狀態 走的是fulfilled狀態判斷裏的邏輯 因此咱們也要確保判斷裏面onFuilled異步執行
// console.log(value); // 'resolve'
// });
// console.log('當前執行棧中同步代碼');
// })
// console.log('全局執行棧中同步代碼');
//
return newPromise = new Promise((resolve, reject) => {
if(that.status === FULFILLED) {// 成功態
setTimeout(() => {
try{
let x = onFulfilled(that.value);
resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一個onFulfilled的返回值
} catch(e) {
reject(e); // 捕獲前面onFulfilled中拋出的異常 then(onFulfilled, onRejected);
}
}, name);
}else if(that.status === REJECTED) {
setTimeout(() => {
try {
let x = onRejected(that.reason);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
});
}else if(that.status === PENDING) {
// 當異步調用resolve/rejected時 將onFulfilled/onRejected收集暫存到集合中
that.onFulfilledCallbacks.push((value) => {
setTimeout(() => {
try {
let x = onFulfilled(value);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
})
});
that.onRejectedCallbacks.push((reason) => {
setTimeout(() => {
try {
let x = onRejected(reason);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
})
});
}
}, name)
};
/**
* resolve中的值幾種狀況：
* 1.普通值
* 2.promise對象
* 3.thenable對象/函數
*/
/**
* 對resolve 進行改造加強 針對resolve中不一樣值狀況 進行處理
* @param {promise} promise2 promise1.then方法返回的新的promise對象
* @param {[type]} x promise1中onFulfilled的返回值
* @param {[type]} resolve promise2的resolve方法
* @param {[type]} reject promise2的reject方法
*/
function resolvePromise(promise2, x, resolve, reject) {
let self = this;
//PromiseA+ 2.3.1
if (promise2 === x) {
reject(new TypeError('Chaining cycle'));
}
if (x && typeof x === 'object' || typeof x === 'function') {
let used; //PromiseA+2.3.3.3.3 只能調用一次
try {
let then = x.then;
if (typeof then === 'function') {
//PromiseA+2.3.3
then.call(x, (y) => {
//PromiseA+2.3.3.1
if (used) return;
used = true;
resolvePromise(promise2, y, resolve, reject);
}, (r) => {
//PromiseA+2.3.3.2
if (used) return;
used = true;
reject(r);
}, x.name);
}else{
//PromiseA+2.3.3.4
if (used) return;
used = true;
resolve(x);
}
} catch (e) {
//PromiseA+ 2.3.3.2
if (used) return;
used = true;
reject(e);
}
} else {
//PromiseA+ 2.3.3.4
resolve(x);
}
}
/**
* Promise.all Promise進行並行處理
* 參數: promise對象組成的數組做爲參數
* 返回值: 返回一個Promise實例
* 當這個數組裏的全部promise對象所有變爲resolve狀態的時候，纔會resolve。
*/
Promise.all = function(promises) {
return new Promise((resolve, reject) => {
let done = gen(promises.length, resolve);
promises.forEach((promise, index) => {
promise.then((value) => {
done(index, value)
}, reject)
})
})
}
function gen(length, resolve) {
let count = 0;
let values = [];
return function(i, value) {
values[i] = value;
if (++count === length) {
console.log(values);
resolve(values);
}
}
}
/**
* Promise.race
* 參數: 接收 promise對象組成的數組做爲參數
* 返回值: 返回一個Promise實例
* 只要有一個promise對象進入 FulFilled 或者 Rejected 狀態的話，就會繼續進行後面的處理(取決於哪個更快)
*/
Promise.race = function(promises) {
return new Promise((resolve, reject) => {
promises.forEach((promise, index) => {
promise.then(resolve, reject);
});
});
}
// 用於promise方法鏈時 捕獲前面onFulfilled/onRejected拋出的異常
Promise.prototype.catch = function(onRejected) {
return this.then(null, onRejected);
}
Promise.resolve = function (value) {
return new Promise(resolve => {
resolve(value);
});
}
Promise.reject = function (reason) {
return new Promise((resolve, reject) => {
reject(reason);
});
}
/**
* 基於Promise實現Deferred的
* Deferred和Promise的關係
* - Deferred 擁有 Promise
* - Deferred 具有對 Promise的狀態進行操做的特權方法（resolve reject）
*
*參考jQuery.Deferred
*url: http://api.jquery.com/category/deferred-object/
*/
Promise.deferred = function() { // 延遲對象
let defer = {};
defer.promise = new Promise((resolve, reject) => {
defer.resolve = resolve;
defer.reject = reject;
});
return defer;
}
/**
* Promise/A+規範測試
* npm i -g promises-aplus-tests
* promises-aplus-tests Promise.js
*/
// try {
// module.exports = Promise
// } catch (e) {
// }
複製代碼
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Promise</title>
</head>
<script type="text/javascript" src="./promise.js"></script>
<body>
<script type="text/javascript">
function runAsync1(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
console.log('異步任務1執行完成');
resolve('隨便什麼數據1');
}, 1000);
}, "runAsync1");
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//作一些異步操做
setTimeout(function(){
console.log('異步任務2執行完成');
resolve('隨便什麼數據2');
}, 2000);
}, "runAsync2");
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//作一些異步操做
setTimeout(function(){
console.log('異步任務3執行完成');
resolve('隨便什麼數據3');
}, 2000);
});
return p;
}
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
}, ()=>{},"第一個then")
.then(function(data){
console.log(data);
// return runAsync3();
}, ()=>{},"第二個then");
// .then(function(data){
// console.log(data);
// });
</script>
</body>
</html>
複製代碼
由於在分析代碼的過程當中，開始this還能知道是哪一個this，可是看到循環調用resolvePromise函數的時候就完全被this戰勝了，因此每次調用Promise的時候都添加了name參數，方便分析源碼。java
總結一下實現的總體思路：jquery
- Promise函數：傳遞一個excutor執行函數，並執行excutor(resolve, reject)
- then函數：參數是onFulfilled 和 onRejected，返回一個新的newPromise,並將resolve時調用的函數push到onFulfilledCallbacks數組中，這個函數主要包含了
try {
let x = onFulfilled(value);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
複製代碼
在執行resolve時，執行onFulfilledCallbacks中push的函數，若是onFulfilled函數返回一個promise對象x，則執行x.then爲x中添加callback函數。git
若是想真正弄明白promise的實現思路，仍是須要本身親自打斷點走幾遍的。es6
相關文章
- 1. Promise 源碼分析
- 2. promise源碼分析
- 3. Promise 源碼和分析
- 4. promise源碼解析
- 5. Promise源碼解析
- 6. Promise 源碼解析
- 7. promise源碼深度解析
- 8. 【源碼系列】redux-chunk、redux-promise 源碼分析
- 9. koa源碼中的promise的解析
- 10. Promise/Bluebird源碼
- 更多相關文章...
- • 高併發系統的分析和設計 - 紅包項目實戰
- • Docker 資源彙總 - Docker教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • Java Agent入門實戰（二）-Instrumentation源碼概述
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Promise 源碼分析
- 2. promise源碼分析
- 3. Promise 源碼和分析
- 4. promise源碼解析
- 5. Promise源碼解析
- 6. Promise 源碼解析
- 7. promise源碼深度解析
- 8. 【源碼系列】redux-chunk、redux-promise 源碼分析
- 9. koa源碼中的promise的解析
- 10. Promise/Bluebird源碼