js 手写promise

1. const PENDING = 'pending';
2. const FULFILLED = 'fulfilled';
3. const REJECTED = 'rejected';
5. class MyPromise {
6.     #status = PENDING;
7.     #result = undefined;
8.     #handler = undefined;
10.     constructor(executor) {
11.         // 不能写在外面，因为this指向会出问题
12.         const resolve = (data) => {
13.             this.#changeState(FULFILLED, data);
14.         }
16.         const reject = (err) => {
17.             this.#changeState(REJECTED, err);
18.         }
19.    
20.         try {
21.             executor(resolve, reject);
22.         } catch(err) {
23.             reject(err);
24.         }
25.     }
27.     #changeState (status, result) {
28.         if (this.#status !== PENDING) {
29.             return;
30.         }
31.         this.#status = status;
32.         this.#result = result;
33.         this.#run();
34.     }
36.     #run () {
37.         console.log(this, this.#handler);
38.         if (this.status === PENDING) {
39.             return;
40.         }
41.         const { onFulfilled, onRejected, resolve, reject } = this.#handler;
42.         // 回调不是函数，那么将当前的promise状态透传
43.         // 回调是函数，将函数执行返回值作为新的值传递，状态变为成功，执行过程报错，那么状态就为失败
44.         if(this.#status === FULFILLED) {
45.             if (typeof onFulfilled === 'function') {
46.                 try {
47.                     const res = onFulfilled(this.#result);
48.                     resolve(res);
49.                 } catch (err) {
50.                     reject(err);
51.                 }
52.             } else {
53.                 resolve(this.#result);
54.             }
55.         } else {
56.             if (typeof onRejected === 'function') {
57.                 try {
58.                     const res = onRejected(this.#result);
59.                     resolve(res);
60.                 } catch (err) {
61.                     reject(err);
62.                 }
63.             } else {
64.                 reject(this.#result);
65.             }
66.         }
67.     }
69.     then(onFulfilled, onRejected) {
70.         return  new MyPromise((resolve, reject) => {
71.             this.#handler = { onFulfilled, onRejected, resolve, reject };
72.             this.#run();
73.         });
74.     }
75. }
77. const p = new Promise((resolve, reject) => {
78.     // setTimeout(() => {
79.         reject(222);
80.     // }, 0);
81.     // resolve(111);
82.     // throw 123;
83.     // setTimeout(() => {
84.     //     throw 123;  // 异步错误捕获不到，Promise也是一样
85.     // }, 0);
86. });
88. p.then((res) => {
89.     console.log('成功1', res);
90. }, (err) => {
91.     console.log('失败1', err);
92.     return 333;
93. }).then(1, (err) => {
94.     console.log('失败2', err);
95. }).then((res) => {
96.     console.log('成功3', res);
97. }, (err) => {
98.     console.log('失败3', err);
99. }).then((res) => {
100.     console.log('成功4', res);
101. }, (err) => {
102.     console.log('失败4', err);
103. });
105. const p1 = new MyPromise((resolve, reject) => {
106.     // setTimeout(() => {
107.         reject(222);
108.     // }, 0);
109.     // resolve(111);
110.     // throw 123;
111.     // setTimeout(() => {
112.     //     throw 123;  // 异步错误捕获不到，Promise也是一样
113.     // }, 0);
114. });
116. p1.then((res) => {
117.     console.log('成功1', res);
118. }, (err) => {
119.     console.log('失败1', err);
120.     return 333;
121. }).then(1, (err) => {
122.     console.log('失败2', err);
123. }).then((res) => {
124.     console.log('成功3', res);
125. }, (err) => {
126.     console.log('失败3', err);
127. }).then((res) => {
128.     console.log('成功4', res);
129. }, (err) => {
130.     console.log('失败4', err);
131. });

复制代码

其他静态方法

1.         static resolve(value) {
2.         return new MyPromise((resolve) => resolve(value));
3.     }
5.     static reject(reason) {
6.         return new MyPromise((resolve, reject) => reject(reason));
7.     }
9.     static all(promises) {
10.         // 问题关键: 什么时候要执行resolve, 什么时候要执行reject
11.         return new MyPromise((resolve, reject) => {
12.             const values = [];
13.             promises.forEach((promise) => {
14.                 promise.then(
15.                     (res) => {
16.                         values.push(res);
17.                         if (values.length === promises.length) {
18.                             resolve(values);
19.                         }
20.                     },
21.                     (err) => {
22.                         reject(err);
23.                     },
24.                 );
25.             });
26.         });
27.     }
29.     static allSettled(promises) {
30.         return new MyPromise((resolve) => {
31.             const results = [];
32.             promises.forEach((promise) => {
33.                 promise.then(
34.                     (res) => {
35.                         results.push({ status: PROMISE_STATUS_FULFILLED, value: res });
36.                         if (results.length === promises.length) {
37.                             resolve(results);
38.                         }
39.                     },
40.                     (err) => {
41.                         results.push({ status: PROMISE_STATUS_REJECTED, value: err });
42.                         if (results.length === promises.length) {
43.                             resolve(results);
44.                         }
45.                     },
46.                 );
47.             });
48.         });
49.     }
51.     static race(promises) {
52.         return new MyPromise((resolve, reject) => {
53.             promises.forEach((promise) => {
54.                 promise.then(resolve, reject);
55.             });
56.         });
57.     }
59.     static any(promises) {
60.         // resolve必须等到有一个成功的结果
61.         // reject所有的都失败才执行reject
62.         const reasons = [];
63.         return new MyPromise((resolve, reject) => {
64.             promises.forEach((promise) => {
65.                 promise.then(resolve, (err) => {
66.                     reasons.push(err);
67.                     if (reasons.length === promises.length) {
68.                         reject(new AggregateError(reasons));
69.                     }
70.                 });
71.             });
72.         });
73.     }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告