手写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 }
复制代码

 

posted @   沁霓  阅读(49)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示