1. 程式人生 > 其它 >手寫Promise裡面的類方法(完整版)

手寫Promise裡面的類方法(完整版)

1:直接上程式碼:主要就是思路,以及判斷情況,什麼時候該回調什麼函式

  1 const PEOMISE_STATUS_PENDING = 'pending'
  2 const PEOMISE_STATUS_FULFILLED = 'fulfilled'
  3 const PEOMISE_STATUS_REJECTED = 'rejected'
  4     //封裝函式
  5 function exeFunction(exefunction, value, resolve, reject) {
  6     try {
  7         const result = exefunction(value)
8 resolve(result) 9 } catch (err) { 10 reject(err) 11 } 12 13 } 14 class tyyPromise { 15 16 constructor(executor) { 17 this.status = PEOMISE_STATUS_PENDING 18 this.value = undefined 19 this.reason = undefined 20 this.onFulfilledfns = []
21 this.onRejectedfns = [] 22 const resolve = (value) => { 23 if (this.status === PEOMISE_STATUS_PENDING) { 24 //新增微任務 25 queueMicrotask(() => { 26 if (this.status !== PEOMISE_STATUS_PENDING) return 27 this
.status = PEOMISE_STATUS_FULFILLED 28 this.value = value 29 this.onFulfilledfns.forEach((onFulfilled) => { 30 onFulfilled(this.value) 31 }) 32 }) 33 } 34 35 36 } 37 const reject = (reason) => { 38 if (this.status === PEOMISE_STATUS_PENDING) { 39 40 //以免then還沒執行 41 queueMicrotask(() => { 42 if (this.status !== PEOMISE_STATUS_PENDING) return 43 this.status = PEOMISE_STATUS_REJECTED 44 this.reason = reason 45 this.onRejectedfns.forEach((onRejected) => { 46 onRejected(this.reason) 47 }) 48 }) 49 } 50 } 51 52 try { 53 executor(resolve, reject) 54 } catch (err) { 55 reject(err); 56 } 57 } 58 then(onFulfilled, onRejected) { 59 //直接給它返回 因為executor會直接執行的 60 return new tyyPromise((resolve, reject) => { 61 //判斷 62 onRejected = onRejected || (err => { throw err }) 63 //這句話防止catch的時候返回的undefined阻斷了then 64 onFulfilled = onFulfilled || (value => { return value }) 65 //判斷狀態解決定時器裡面的then執行不了的問題 66 if (this.status === PEOMISE_STATUS_FULFILLED && onFulfilled) { 67 //實現鏈式呼叫 68 69 exeFunction(onFulfilled, this.value, resolve, reject) 70 71 } 72 //把then的回撥放到數組裡面去 73 if (this.status === PEOMISE_STATUS_REJECTED && onRejected) { 74 75 exeFunction(onRejected, this.reason, resolve, reject) 76 } 77 if (this.status === PEOMISE_STATUS_PENDING) { 78 if (onFulfilled) this.onFulfilledfns.push(() => { 79 80 exeFunction(onFulfilled, this.value, resolve, reject) 81 }) 82 if (onRejected) this.onRejectedfns.push(() => { 83 exeFunction(onRejected, this.reason, resolve, reject) 84 }) 85 } 86 }) 87 88 } 89 catch (onRejected) { 90 return this.then(undefined, onRejected) 91 92 } finally(onFinally) { 93 //不管成功或者失敗都要呼叫finally 94 this.then(() => { 95 onFinally() 96 }, () => { 97 onFinally() 98 }) 99 100 } 101 static resolve(value) { 102 return new tyyPromise(resolve => { 103 resolve(value) 104 }) 105 } 106 static reject(value) { 107 return new tyyPromise((resolve, reject) => { 108 reject(value) 109 }) 110 } 111 static all(promises) { 112 return new tyyPromise((resolve, reject) => { 113 const values = [] 114 promises.forEach(promise => { 115 promise.then(res => { 116 values.push(res) 117 if (values.length === promises.length) { 118 resolve(values) 119 } 120 }, err => { 121 reject(err) 122 }) 123 }) 124 }) 125 126 } 127 static allSettled(promises) { 128 return new tyyPromise((resolve) => { 129 const results = [] 130 promises.forEach(promise => { 131 promise.then(res => { 132 results.push({ status: PEOMISE_STATUS_FULFILLED, value: res }) 133 if (results.length === promises.length) 134 resolve(results) 135 }, err => { 136 results.push({ status: PEOMISE_STATUS_REJECTED, value: err }) 137 if (results.length === promises.length) 138 resolve(results) 139 }) 140 }) 141 142 }) 143 } 144 static race(promises) { 145 return new tyyPromise((resolve, reject) => { 146 promises.forEach(promise => { 147 //race是哪個結果先得到就先執行 148 promise.then(resolve, reject) 149 }) 150 }) 151 } 152 static any(promises) { 153 const reasons = [] 154 return new tyyPromise((resolve, reject) => { 155 promises.forEach(promise => { 156 promise.then(resolve, err => { 157 reasons.push(err) 158 if (reasons.length === promises.length) { 159 reject(new AggregateError(reasons)); 160 } 161 }) 162 }) 163 }) 164 } 165 }