今天發現一個問題,看下方代碼
let p = new Promise(function(resolve, reject) { resolve(1) console.log('2222'); }); p.then(res => { console.log('1111'); })
輸出結果是2222 1111,而自己想的是1111 2222,帶着問題查詢之后發現.
原來then后邊跟的都是異步執行..學習到了.
此鏈接是各位大佬的回答https://www.zhihu.com/question/57071244
用網上學習ES5實現的Promise ,輸出結果和自己想的一樣,原因可以去上方地址找到.
下方是ES5實現的promise
function Promise(callback) {
var self = this;
self.status = 'PENDING'; // Promise當前的狀態
self.data = undefined; // Promise的值
self.onResolvedCallback = []; // Promise resolve時的回調函數集
self.onRejectedCallback = []; // Promise reject時的回調函數集
callback(resolve, reject); // 執行executor並傳入相應的參數
function resolve(value) {
if (self.status == 'PENDING') {
self.status == 'FULFILLED';
self.data = value;
// 依次執行成功之后的函數棧
for (var i = 0; i < self.onResolvedCallback.length; i++) {
self.onResolvedCallback[i](value);
}
}
}
function reject(error) {
if (self.status === 'PENDING') {
self.status = 'REJECTED';
self.data = error;
// 依次執行失敗之后的函數棧
for (var i = 0; i < self.onRejectedCallback.length; i++) {
self.onRejectedCallback[i](error);
}
}
}
}
Promise.prototype.then = function(onResolved, onRejected) {
var self = this;
var promise2;
// 根據標准,如果then的參數不是function,則我們需要忽略它,此處以如下方式處理
onResolved = typeof onResolved === 'function' ? onResolved : function(value) {};
onRejected = typeof onRejected === 'function' ? onRejected : function(reason) {};
if (self.status === 'FULFILLED') {
// 如果promise1(此處即為this/self)的狀態已經確定並且是resolved,我們調用onResolved
// 因為考慮到有可能throw,所以我們將其包在try/catch塊里
return (promise2 = new Promise(function(resolve, reject) {
try {
var x = onResolved(self.data);
if (x instanceof Promise) {
// 如果onResolved的返回值是一個Promise對象,直接取它的結果做為promise2的結果
x.then(resolve, reject);
}
resolve(x); // 否則,以它的返回值做為promise2的結果
} catch (e) {
reject(e); // 如果出錯,以捕獲到的錯誤做為promise2的結果
}
}));
}
// 此處與前一個if塊的邏輯幾乎相同,區別在於所調用的是onRejected函數,就不再做過多解釋
if (self.status === 'REJECTED') {
return (promise2 = new Promise(function(resolve, reject) {
try {
var x = onRejected(self.data);
if (x instanceof Promise) {
x.then(resolve, reject);
}
} catch (e) {
reject(e);
}
}));
}
if (self.status === 'PENDING') {
// 如果當前的Promise還處於pending狀態,我們並不能確定調用onResolved還是onRejected,
// 只能等到Promise的狀態確定后,才能確實如何處理。
// 所以我們需要把我們的**兩種情況**的處理邏輯做為callback放入promise1(此處即this/self)的回調數組里
// 邏輯本身跟第一個if塊內的幾乎一致,此處不做過多解釋
return (promise2 = new Promise(function(resolve, reject) {
self.onResolvedCallback.push(function(value) {
try {
var x = onResolved(self.data);
if (x instanceof Promise) {
x.then(resolve, reject);
}
resolve(x); // 否則,以它的返回值做為promise2的結果
} catch (e) {
reject(e);
}
});
self.onRejectedCallback.push(function(reason) {
try {
var x = onRejected(self.data);
if (x instanceof Promise) {
x.then(resolve, reject);
}
} catch (e) {
reject(e);
}
});
}));
}
};
// 為了下文方便,我們順便實現一個catch方法
Promise.prototype.catch = function(onRejected) {
return this.then(null, onRejected);
};
