11

squid-Xu · Jul 25, 2024 · 8ff8306 · 8ff8306
1 parent 3e8fa1a
commit 8ff8306
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 11 deletions.
diff --git a/demo/1.html b/demo/1.html
@@ -12,7 +12,7 @@
 				this.PromiseState = 'pending';
 				this.PromiseResult = null;
 				//声明属性
-				this.callback = {};
+				this.callbacks = [];
 
 				// resolve函数
 				const resolve = data => {
@@ -23,7 +23,10 @@
 					// 2、设置对象结果值（promiseResult）
 					this.PromiseResult = data;
 					//执行异步成功回调
-					this.callback.onResolved?.(this.PromiseResult);
+					this.callbacks.forEach(v => {
+						v.onResolved?.(this.PromiseResult);
+					});
+					// this.callbacks.onResolved?.(this.PromiseResult);
 				};
 
 				//reject函数
@@ -35,7 +38,10 @@
 					// 2、设置对象结果值（promiseResult）
 					this.PromiseResult = data;
 					//执行异步失败回调
-					this.callback.onRejected?.(this.PromiseResult);
+					this.callbacks.forEach(v => {
+						v.onRejected?.(this.PromiseResult);
+					});
+					// this.callback.onRejected?.(this.PromiseResult);
 				};
 				// 同步调用，【执行器函数】
 				try {
@@ -58,10 +64,10 @@
 				//判断pending状态
 				if (this.PromiseState === 'pending') {
 					// 保存回调函数
-					this.callback = {
+					this.callbacks.push({
 						onResolved,
 						onRejected,
-					};
+					});
 				}
 			};
 
@@ -80,6 +86,16 @@
 					console.log(reason);
 				}
 			);
+			p.then(
+				value => {
+					console.log(value);
+				},
+				reason => {
+					console.log(reason);
+				}
+			);
+
+			console.log(p);
 		</script>
 	</body>
 </html>
diff --git a/promise/summary/No2.md b/promise/summary/No2.md
@@ -74,13 +74,13 @@ p.then(
 ## 异步任务回调的执行
 
 
-```js
+```js {6,17,29,52-55}
 function myPromise(executor) {
     //添加属性
     this.PromiseState = 'pending';
     this.PromiseResult = null;
     //声明属性
-    this.callback = {};
+    this.callback = {};// [!code ++]
 
     // resolve函数
     const resolve = data => {
@@ -91,7 +91,7 @@ function myPromise(executor) {
         // 2、设置对象结果值（promiseResult）
         this.PromiseResult = data;
         //执行异步成功回调
-        this.callback.onResolved?.(this.PromiseResult);
+        this.callback.onResolved?.(this.PromiseResult);// [!code ++]
     };
 
     //reject函数
@@ -103,7 +103,7 @@ function myPromise(executor) {
         // 2、设置对象结果值（promiseResult）
         this.PromiseResult = data;
         //执行异步失败回调
-        this.callback.onRejected?.(this.PromiseResult);
+        this.callback.onRejected?.(this.PromiseResult);// [!code ++]
     };
     // 同步调用，【执行器函数】
     try {
@@ -126,10 +126,94 @@ myPromise.prototype.then = function (onResolved, onRejected) {
     //判断pending状态
     if (this.PromiseState === 'pending') {
         // 保存回调函数
-        this.callback = {
+        this.callback = {// [!code ++]
+            onResolved,// [!code ++]
+            onRejected,// [!code ++]
+        };// [!code ++]
+    }
+};
+
+let p = new myPromise((resolve, reject) => {
+    //成功
+    setTimeout(() => {// [!code ++]
+        reject(2);
+    }, 1000);// [!code ++]
+});
+
+p.then(
+    value => {
+        console.log(value);
+    },
+    reason => {
+        console.log(reason);
+    }
+);
+```
+
+## 指定多个回调的实现
+
+```js {6,17-19,32-34,58-61}
+function myPromise(executor) {
+    //添加属性
+    this.PromiseState = 'pending';
+    this.PromiseResult = null;
+    //声明属性
+    this.callbacks = [];
+
+    // resolve函数
+    const resolve = data => {
+        // 判断状态
+        if (this.PromiseState !== 'pending') return;
+        // 1、修改对象的状态（promiseState）
+        this.PromiseState = 'fulfilled'; // resolved
+        // 2、设置对象结果值（promiseResult）
+        this.PromiseResult = data;
+        //执行异步成功回调
+        this.callbacks.forEach(v => { // [!code ++]
+            v.onResolved?.(this.PromiseResult); // [!code ++]
+        }); // [!code ++]
+        // this.callbacks.onResolved?.(this.PromiseResult);  // [!code --]
+    };
+
+    //reject函数
+    const reject = data => {
+        // 判断状态
+        if (this.PromiseState !== 'pending') return;
+        // 1、修改对象的状态（promiseState）
+        this.PromiseState = 'rejected'; // rejected
+        // 2、设置对象结果值（promiseResult）
+        this.PromiseResult = data;
+        //执行异步失败回调
+        this.callbacks.forEach(v => { // [!code ++]
+            v.onRejected?.(this.PromiseResult); // [!code ++]
+        }); // [!code ++]
+        // this.callback.onRejected?.(this.PromiseResult); // [!code --]
+    };
+    // 同步调用，【执行器函数】
+    try {
+        executor(resolve, reject);
+    } catch (error) {
+        // 修改promise对象状态为失败
+        reject(error);
+    }
+}
+
+// 添加then方法
+myPromise.prototype.then = function (onResolved, onRejected) {
+    //调用回调函数
+    if (this.PromiseState === 'fulfilled') {
+        onResolved(this.PromiseResult);
+    }
+    if (this.PromiseState === 'rejected') {
+        onRejected(this.PromiseResult);
+    }
+    //判断pending状态
+    if (this.PromiseState === 'pending') {
+        // 保存回调函数
+        this.callbacks.push({
             onResolved,
             onRejected,
-        };
+        });
     }
 };
 
@@ -148,4 +232,14 @@ p.then(
         console.log(reason);
     }
 );
+p.then(
+    value => {
+        console.log(value);
+    },
+    reason => {
+        console.log(reason);
+    }
+);
+
+console.log(p);
 ```