調用then的時候,如果異步任務已完成則執行成功或失敗的回調,否則掛起隊列。當promise狀態改變的時候,調用掛起的隊列,執行傳入的then的回調函數。
// promise本質:狀態機
// 1.當狀態改變的時候,調用之前掛起的then隊列
// 2.then的時候執行對應的函數 并傳參
class MyPromise {
constructor(fn) {
this.res = null
this.err = null
this._status = 'pending' // 當前異步任務的執行狀態
this._queue = [] // 等待隊列
fn((res) => { // 異步任務成功時用戶自主調用
// console.log('成功');
this.res = res
this.status = 'resolved'
this._queue.length && this._queue.forEach(item => { // 如果等待隊列不為空 則調用傳入的成功回調
item.fn1(res)
})
}, (err) => { // 異步任務失敗時用戶自主調用
// console.log('失敗');
this.err = err
this.status = 'rejected'
this._queue.length && this._queue.forEach(item => { // 如果等待隊列不為空 則調用傳入的失敗回調
item.fn2(res)
})
})
}
static all(arr) {
let results = []
return new MyPromise((resolve, reject) => {
let i = 0
next()
function next() {
arr[i].then((res) => {
results.push(res)
i++
if (i === arr.length) {
resolve(results)
} else {
next()
}
}, (err) => {
reject(err)
})
}
})
}
then(fn1, fn2) {
// console.log('then');
if (this.status === 'resolved') { // 執行then的時候異步任務已完成--狀態為成功
fn1(this.res)
} else if (this.status === 'rejected') { // 執行then的時候異步任務已完成--狀態為失敗
fn2(this.err)
} else { // 執行then的時候異步任務未完成
this._queue.push({fn1, fn2})
}
// console.log('等待隊列', this._queue);
}
}
// test
let p1 = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 1000);
})
let p2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(2)
}, 1000);
})
p1.then((res) => {
console.log('成功回調==>', res);
}, (err) => {
console.log('失敗回調==>', err);
})
MyPromise.all([p1, p2]).then((res) => {
console.log('all', res);
}, (err) => {
console.log('all', err);
})