1 Promise 是一個異步操作返回的對象,用來傳遞異步操作的消息
2 根據自己對 Promise 的理解,實現一個Promise
Promise 有三種狀態:Pending 初始態; Fulfilled 成功態; Rejected 失敗態。
function Promise(executor) {
let self = this;
self.status = 'pending'; //等待態
self.value = undefined; //成功的返回值
self.reason = undefined; //失敗的原因
function resolve(value){
if(self.status === 'pending'){
self.status = 'resolved';
self.value = value;
}
}
function reject(reason) {
if(self.status === 'pending') {
self.status = 'rejected';
self.reason = reason;
}
}
try{
executor(resolve, reject);
}catch(e){
reject(e);// 捕獲時發生異常,就直接失敗
}
}
//onFufiled 成功的回調
//onRejected 失敗的回調
Promise.prototype.then = function (onFufiled, onRejected) {
let self = this;
if(self.status === 'resolved'){
onFufiled(self.value);
}
if(self.status === 'rejected'){
onRejected(self.reason);
}
}
module.exports = Promise;
3 代碼測試
let Promise = require('./Promise');
let promise = new Promise(function (resolve, reject) {
resolve(100);
})
promise.then(function (data) {
console.log('data:', data);
},function (err) {
console.log('err:', err);
})
輸出:data: 100
Promise 實例可以多次then,當成功後會將 then 中的成功方法按順序執行,我們可以先將 then 中成功的回調和失敗的回調存到數組內。當成功的時候調用成功的數組即可。
self.onResolvedCallbacks = []; /* 存放then成功的回調*/
self.onRejectedCallbacks = []; /* 存放then失敗的回調*/
function resolve(value){
if(self.status === 'pending'){
self.status = 'resolved';
self.value = value;
self.onResolvedCallbacks.forEach(function (fn) {
fn();
})
}
}
function reject(reason) {
if(self.status === 'pending') {
self.status = 'rejected';
self.reason = reason;
self.onRejectedCallbacks.forEach(function (fn) {
fn();
})
}
}
if(self.status === 'pending'){
self.onResolvedCallbacks.push(function () {
onFufiled(self.value);
})
self.onRejectedCallbacks.push(function () {
onRejected(self.reason);
})
}
4 實現鏈式調用
衆所周知 Promise 的一大特點,就是鏈式調用。而 Promise 實現鏈式調用就是通過 then 方法返回一個新的 Promise。
如果第一個 then 中返回了一個結果,會將 Promise 的結果繼續傳給下一個 then 中;如果有錯誤則走下一個 then 的失敗。
// 添加 resolvePromise 方法 處理鏈式調用問題
function resolvePromise(p2, x, resolve, reject) {
if(p2 === x){
return reject(new TypeError('循環引用'));
}
if(x!==null || (typeof x === 'object' || typeof x === 'function')){
try{
let then = x.then;
if(typeof then === 'function'){
then.call(x, function (y) {
resolvePromise(promise2, y, resolve, reject);
},function (err) {
reject(err);
});
}else{
resolve(x);
}
}catch(e){
reject(e);
}
}else{
resolve(x);
}
}