直接程式碼
// 宣告函式
function MyPromise(fun) {
this.state = 'Pending'; // 狀態基
this.value = ''; // 成功回撥的預設值
this.successFun = []; // 成功回撥函式陣列
this.errFun = [];
var _self = this;
// 成功時候執行
function resolve(value) {
// 這裡需要注意,判斷返回值是不是一個新的promise, 如果是,需要把這個promise.then執行得到成功的值,
//返回的值在繼 續往下走
if (value && value instance of MyPromise) {
value.then(resolve)
return
}
_self.state = 'Fulfilled'
_self.value = value
if (_self.successFun.length > 0) {
_self.successFun.forEach(cb => {
cb(value)
})
}
};
function reject(err) {
_self.value = err
_self.state = 'Rejected'
_self.errFun.forEach(cb => {
cb(err)
})
};
fun(resolve, reject);
return _self;
}
// 在原型物件上,宣告then方法
MyPromise.prototype.then = function(success, err) {
var _self = this;
var promise2;
// then 方法都是返回新promise
switch(this.state) {
case 'Fulfilled':
promise2 = new MyPromise(function(resolve, reject) {
resolve(success(_self.value))
})
break
case 'Rejected':
promise2 = new MyPromise(function(resolve, reject) {
reject(err(_self.value))
})
break
case 'Pending':
promise2 = new MyPromise(function(resolve, reject) {
_self.successFun.push(function() {
resolve(success(_self.value))
})
_self.errFun.push(function() {
reject(err(_self.value))
})
})
break
}
return promise2
}
// 呼叫
var p = new MyPromise(function(res, rej) {
setTimeout(function(){
res(2222)
}, 1000)
})
var a = p.then(function (result) {
console.log(result)
return new MyPromise(function(res, rej) {
setTimeout(function() {
res(3333)
}, 2000)
res(33333)
})
})
var b = a.then(function (result) {
console.log(result)
return 44444
})
var c = b.then(function (result) {
console.log(result)
return 55555
})
複製程式碼
注意
- then的宣告階段是把新返回的promise的resolve方法的引用提交上一個promise成功回撥裡面等待執行
- 執行then的成功回撥,得到上個reslove傳來的值,處理得到的值傳給下一個resovle(value)