From 8ff8306b2ef1b57fcf1bb4286062b3c582b2c6e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=A2=A6=E5=BC=BA?= <1135349080@qq.com> Date: Thu, 25 Jul 2024 18:32:10 +0800 Subject: [PATCH] 11 --- demo/1.html | 26 ++++++++-- promise/summary/No2.md | 106 ++++++++++++++++++++++++++++++++++++++--- 2 files changed, 121 insertions(+), 11 deletions(-) diff --git a/demo/1.html b/demo/1.html index 9403e04..7fbe188 100644 --- 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); diff --git a/promise/summary/No2.md b/promise/summary/No2.md index 59ca37d..3bea504 100644 --- 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); ``` \ No newline at end of file