Javascript之我也来手写一下Promise

  Promise太重要了,可以说是改变了JavaScript开发体验重要内容之一。而Promise也可以说是现代Javascript中极为重要的核心概念,所以理解Promise/A+规范,理解Promise的实现,手写Promise就显得格外重要。如果要聊Promise就要从回调函数聊到回调地狱,再聊到同步异步,最终聊到Promise、async await。但是我们这篇文章,目的是手写Promise,这些前置知识如果大家不了解的话,希望可以去补充一下。那你可能会说了,我他妈不懂你在说啥,我就是想手写Promise,不行么?大佬~~那肯定是没问题的。好了,废话不多说,咱们开始吧。

一、实现Promise的基本结构

  最开始的部分,我们不得不去看看Promise/A+规范,因为我们所实现的、手写的代码,其实都是根据规范,一步一步来实现的。规范的地址,附在文末。

  整个Promise/A+规范有三个部分:术语、要求、说明。术语部分介绍了核心字段的关键性解释,要求部分基本上就是对整个Promise实现的要求,说明部分,则对Promise的实现提供了一些特殊场景的补充说明。

  首先,我们需要简单了解下Promise的基本概念。Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。与Promise交互的主要方式是通过它的then方法,该方法会注册一个回调函数,用来接收Promise的最终结果,这个结果可能是Promise的最终值,也可能是一个失败的原因。也就是Promise的resolve和reject呗~

  Promise/A+规范详细说明了该then方法的行为,所有符合Promise/A+规范所实现的Promise都可以基于此来提供一个可以互相操作的基础。因此,该规范应该是十分稳定的。也就是说,该Promise/A+规范并不会随意迭代,提供了一个长期稳定不变的规范版本。当然,也可能会有小的修改,但是一定是经过深思熟虑的。额~这些都是废话。重点就是最开始那一句:详细说明了then方法的行为。记住这句话!记住这句话!记住这句话!因为我们后面所做的一切,除了基本结构和参数,所有的一切都是围绕着then展开的。

  最后,核心的Promise/A+规范并不会去管你怎么实现,而是选择专注于提供可互操作的then方法。换句话说,我不管你写怎么实现Promise,我只关注你应该怎么实现then方法的可操作性。

  好了,基本的背景,我们了解了,我们之前说了,整个Promise/A+规范有三部分,我们先来看看第一部分术语,并实现这第一部分。

  1. “promise”是一个function或者object,它的行为要符合本规范。
  2. “thenable”是一个function或者object,它定义了then方法。(啥意思呢,其实就是:thenable是一个可以调用then方法的function或者object,再换句话说,就是我们new Promise().then的这个new Promise()呗,你咋实现我不管,有就行。)
  3. “value”是任何合法的值(包括thenable、promise或者undefined)。
  4. “exception”是使用throw语句抛出的值。
  5. “reason”是一个用来表示Promise为什么被reject的原因,的值。

  就这些,但是我稍微解释下,promise是指Promise这个整体,它可以是一个构造函数,也可以是个对象。如果Promise是个构造函数的话,那么thenable,其实就是Promise这个构造函数的实例,这个实例要有一个then方法。继续,exception就是异常处理,通过try catch语句来抛出错误。那么最后,value和reason分别对应了resolve和reject的参数。

  巴巴了这么多,我们先来写一点代码吧,不然长篇大论确实有点枯燥。

  前面总结了一下Promise基本背景,还有基本的术语,我们这一小节就来实现基于此的代码,但是我先总结一下哈,我们要实现的到底包括哪些内容。

  首先,我们要实现一个Promise类,这个类会提供一个实例方法也就是then方法。然后,我们还要有两个值:value和reason。最后,我们还要处理抛出的异常。没啦~一句话概括,精炼!

 1 class Promise {
 2   constructor(excutor) {
 3     this.value = undefined;
 4     this.reason = undefined;
 5     const resolve = (value) => {};
 6     const reject = (reason) => {};
 7     try {
 8       excutor(resolve, reject);
 9     } catch (err) {
10       reject(err);
11     }
12   }
13   then(onFulfilled, onRejected) {}
14 }

  简单不,其实啥也没有,就是按照之前我们描述的规范,来一步一步实现的。我简单再总结下,首先我们声明了一个Promise类,然后这个类有一个实例方法then,这个then方法接收两个回调函数(后面我们会完善的),然后整个类的构造函数部分,声明了一个value和reason,分别就是该Promise构造函数对应结果状态的值。最后,我们通过try…catch语句执行传递进来的回调excutor,并把resolve和reject方法作为excutor的回调。这里稍微有点绕,要捋一下噢。

  那么,我们再根据使用时的场景,来巩固一下上面的代码,通常,我们在使用Promise的时候,是这样的:

1 const p1 = new Promise((resolve, reject) => {});

  我们看,使用的时候,我们会给Promise这个类传过去一个方法,OK,这个方法就是我们Promise类中excutor。而这个executor又传回去了两个函数参数,可以让我们在new Promise时传递的executor的内部去调用:

1 const p1 = new Promise((resolve, reject) => {
2   if(true){
3     resolve("success")
4   } else {
5     reject("fail")
6   }
7 });

  这样我们的value和reason就传递给了constructor中的resolve和reject。最后,还有个实例方法then:

1 p1.then(
2   (value) => {
3     console.log("成功", value);
4   },
5   (reason) => {
6     console.log("失败", reason);
7   }
8 );

  这个then方法有两个参数,分别是成功的回调函数和失败的回调函数,也就是分别代表了Promise类中的实例的then方法的onFulfilled, onRejected。那么基本的结构我们就写完了,但是现在我们写的这个Promise肯定是没法用的。所以,我们还得继续往下,看看规范怎么要求的,我们按照要求再来完善。

二、完成基本的Promise

  我们前面完成了基本的结构,但是那些代码还缺了一些内容,这一小节,我们就来根据后面的Promise/A+规范,也就是要求部分,来实现、完善后面的代码。首先,规范就对Promise的状态,进行了详细的描述。

  promise必须处于以下三种状态之一:pending, fulfilled, or rejected。也就是待处理、已完成或已拒绝。

    1. 当处于pending状态时:

    • 可以转换到已完成(fulfilled)或者已拒绝(rejected)状态。

    2. 当处于fulfilled状态时:

    • 不可以改变状态。
    • 必须有一个不能改变的value。

    3.  当处于rejected状态时:

    • 不可以改变状态。
    • 必须有一个不能改变的reason。

  OK,这就是关于Promise的状态的描述。其实上面的说明很好理解,就是我们要给Promise这个类维护一个status字段,这个status有三个状态常量。一旦确定了status的结果,也就是status如果不是pending的话,就不能再修改status的状态了。

  我们继续,针对then方法的详细描述,当然,我们这个阶段,只需要其中的一部分。首先,Promise必须提供一个then方法来让使用者可以访问当前或最终状态的value或reason。其次,Promise的then方法接受两个参数:

promise.then(onFulfilled, onRejected)

  诶嘿!就是我们上面写的噢!继续~注意,以下的列表标记,完全抄袭自Promise/A+规范,方便大家查找。

  2.2.1 onFulfilled和onRejected都是可选参数

    2.2.1.1  如果onFulFilled不是函数,则忽略。

    2.2.1.2  如果onRejected不是函数,则忽略。

  2.2.2  如果onFulfilled是一个函数

    2.2.2.1  onFulfilled必须在promise已经是fulfilled的状态后调用,并且把promise的value作为它的第一个参数。

    2.2.2.2  在promise已经是fulfilled状态之前该方法不能被调用。

    2.2.2.3  该方法只能被调用一次。

  2.2.3  如果onRejected是一个函数

    2.2.3.1  onRejected必须在promise已经是rejected的状态后调用,并且把promise的reason作为它的第一个参数。

    2.2.3.2  在promise已经是rejected状态之前该方法不能被调用。

    2.2.3.3  该方法只能被调用一次。

  2.2.4  onFulfilled或者onRejected必须在执行上下文栈只有平台代码的时候才可以被调用。

  2.2.5  onFulfilled或者onRejected必须作为函数被调用(即没有this值)。

  OK,这一段规范翻译,其中尤其要关注的是2.2.4和2.2.5。

  首先,2.2.4是什么意思呢?平台代码,就是指环境、引擎、或者promise实现的代码,也就是说在onFulfilled或者onRejected被调用的时候,只能是在执行上下文栈中的最底层,它的前面要么是全局、要么是另一个符合规范的promise。在实践中,这样可以确保在调用事件环之后异步执行onFulfilled或者onRejected回调。这可以通过宏任务(比如 setTimeout 或者setImmediate)或微任务(MutationObserver或者process.nextTick)机制来实现。由于promise的实现会被当作平台代码,所以它本身可能包含一个任务调度队列或者一个调用处理程序的“蹦床”。这里的蹦床可以理解成一种转换函数,比如递归可能会导致栈溢出,那么可以通过蹦床函数把递归转换成循环,绕过JS的栈溢出检测机制。当然你也可能会写成死循环,那就是你代码的问题了。

  其次,2.2.5比较容易理解,就是指你实现的onFulfilled或者onRejected只能是一个函数,并且它内部的this如果在严格模式下是undefined,在非严格模式,则是全局对象。换句话说,也就是你的onFulfilled或者onRejected不会被任何对象或者函数调用,不归属于任何对象或者函数。

  理解了这段规范了吧?那么我们开始手写代码吧。

  首先,根据规范,我们要加入三个状态常量,并且Promise的初始状态肯定是pending:

 1 const PEDNING = "PENDING";
 2 const FULFILLED = "FULFILLED";
 3 const REJECTED = "REJECTED";
 4 class Promise {
 5   constructor(excutor) {
 6     this.status = PENDING;
 7     this.value = undefined;
 8     this.reason = undefined;
 9     const resolve = (value) => {};
10     const reject = (reason) => {};
11     try {
12       excutor(resolve, reject);
13     } catch (err) {
14       reject(err);
15     }
16   }
17   then(onFulfilled, onRejected) {}
18 }

  额外的,我们还要维护一个队列,这个队列用来当我们调用resolve或者reject的时候,触发我们传给then方法的函数参数。我们还要完善resolve和reject方法,以及then方法:

 1 const PENDING = "PEDNING";
 2 const FULFILLED = "FULFILLED";
 3 const REJECTED = "REJECTED";
 4 class Promise {
 5   constructor(excutor) {
 6     this.status = PENDING;
 7     this.value = undefined;
 8     this.reason = undefined;
 9     this.onResolvedCallbacks = [];
10     this.onRejectedCallbacks = [];
11     const resolve = (value) => {
12       if (this.status === PENDING) {
13         this.value = value;
14         this.status = FULFILLED;
15         this.onResolvedCallbacks.forEach((cb) => cb(this.value));
16       }
17     };
18     const reject = (reason) => {
19       if (this.status === PENDING) {
20         this.reason = reason;
21         this.status = REJECTED;
22         this.onRejectedCallbacks.forEach((cb) => cb(this.reason));
23       }
24     };
25     try {
26       excutor(resolve, reject);
27     } catch (err) {
28       reject(err);
29     }
30   }
31   then(onFulfilled, onRejected) {
32     if (this.status === FULFILLED) {
33       onFulfilled(this.value);
34     }
35     if (this.status === REJECTED) {
36       onRejected(this.reason);
37     }
38     if (this.status === PENDING) {
39       this.onResolvedCallbacks.push(onFulfilled);
40       this.onRejectedCallbacks.push(onRejected);
41     }
42   }
43 }

  我们来看下上面的代码,第9、10行,我们分别维护了一个数组,当然我们在promise仍旧是pending状态的时候调用then方法,就会把这两个状态的回调函数缓存起来。等到我们调用resolve或者reject确认了promise的状态时,就会去调用对应的缓存队列执行回调。

  resolve和reject方法十分简单,绑定value或者reason,改变状态,然后执行对应缓存的回调函数。而then方法的处理目前也并不复杂,根据状态去调用对应回调或者缓存回调。

  注意,之前我们翻译规范的时候还说过要确保在调用事件环之后异步执行onFulfilled或者onRejected回调。这个我们后面再实现,所以现在还都是同步代码。我们来测试一下我们的代码执行效果吧:

 1 const p1 = new Promise((resolve, reject) => {
 2   resolve("success");
 3 });
 4 
 5 p1.then(
 6   (value) => {
 7     console.log("成功", value);
 8   },
 9   (reason) => {
10     console.log("失败", reason);
11   }
12 );
13 
14 const p2 = new Promise((resolve, reject) => {
15   reject("fail");
16 });
17 
18 p2.then(
19   (value) => {
20     console.log("成功", value);
21   },
22   (reason) => {
23     console.log("失败", reason);
24   }
25 );

  我们来分析下这段代码是如何执行的。首先,当我们new Promise的时候就会执行Promise这个类的constructor,此时生成了部分实例字段和resolve、reject方法。并且执行了excutor方法,那么由于我们在方法内部调用resolve方法,也就相当于constructor是这样执行的:

1 try {
2   function excutor(resolve,reject){
3     resolve("success")
4   }
5   excutor(resolve, reject);
6 } catch (err) {
7   reject(err);
8 }

  那么此时,我们已经先走了resolve方法,也就是先确定了promised状态,再强调一下,现在都是同步的噢,然后,当我们后面再去调用then方法的时候,promise的状态已经是确定的了,所以不会去走缓存,直接走了

if (this.status === FULFILLED) {
  onFulfilled(this.value);
}

  这段代码,于是就执行了传给then的onFulfilled状态的回调。p2的例子也是一样的。

  那么我们继续再来看个例子:

 1 const p1 = new Promise((resolve, reject) => {
 2   setTimeout(() => {
 3     resolve(1);
 4   }, 1000);
 5 });
 6 
 7 p1.then(
 8   (value) => {
 9     console.log(value);
10   },
11   (reason) => {
12     console.log(reason);
13   }
14 );

  这个例子的执行结果是什么?我先不说答案,来捋一下,首先我们执行了excutor,但是此时我们并没有调用resolve,因为是异步的,所以要在一秒后才去调用resolve,那么此时executor就执行完了,然后我们去执行then方法,此时状态还没确定,所以走then的时候就走了这段代码:

1 if (this.status === PENDING) {
2   this.onResolvedCallbacks.push(onFulfilled);
3   this.onRejectedCallbacks.push(onRejected);
4 }

  缓存了起来,那么等到一秒后,调用了resolve,由于此时还是pending状态,所以resolve就走了其内部的逻辑:

1 const resolve = (value) => {
2   if (this.status === PENDING) {
3     this.value = value;
4     this.status = FULFILLED;
5     this.onResolvedCallbacks.forEach((cb) => cb(this.value));
6   }
7 };

  所以一秒后才会打印出1。

三、完善Promise的then方法

  那么继续,我们要进入下一个阶段了,之前的阶段我们解读(就是把规范复制过来翻译翻译)的规范还欠了点债,就是异步处理。那么这一小节,我们继续翻译剩下的规范,并且把欠大家的债还上。

  2.2.6  then方法可以被同一个promise调用多次

    2.2.6.1  当promise是fulfilled状态的时候,所有相关的onFulfilled回调函数必须按照then方法调用的顺序执行。

    2.2.6.2  当promise是rejected状态的时候,所有相关的onRejected回调函数必须按照then方法调用的顺序执行。

  2.2.7  then方法必须返回一个promise

promise2 = promise1.then(onFulfilled, onRejected);

    2.2.7.1  如果onFulfilled或者onRejected的其中一个返回了一个值,x。那么要运行:Promise Resolution Procedure [[Resolve]](promise2, x)。

    2.2.7.2  如果onFulfilled或者onRejected其中一个抛出了一个错误,e。promise2也必须变成使用e作为reason的拒绝状态。

    2.2.7.3  如果onFulfilled不是一个函数,并且promise1已经是fulfilled状态,promise2也必须变成fulfilled状态并且使用和promise1一样的value作为值。

    2.2.7.4  如果onRejected不是一个函数,并且promise1已经是rejected状态,promise2也必须变成rejected状态并且使用和promise1一样的reason作为错误信息。

  OK,这就是我们这个阶段要实现的规范。其中有些内容还是要解释下的。首先就是让人疑惑的Promise Resolution Procedure [[Resolve]](promise2, x)这个东西我特意没有翻译,因为你需要把它看作一个整体,现在这个阶段,你可以把它理解成一段要处理特定逻辑的代码块

  那么然后就是2.2.7.2到2.2.7.4,实际上只说了一句话,then方法必须返回一个promise,并且一旦该promise的状态已经确定,后续的promise也一定是同样的状态不得更改,且要把源promise的value或reason依次向后传递。也就是所谓的值穿透,听起来高大上,实际上没啥复杂的概念。

  我们接下来写代码吧。哦对,2.2.6其实我们上一小节已经写完了,就是那个数组,每次调用then如果promise是pending状态,就会往两个数组中依照then调用的顺序依次往里添加回调。所以,我们这一小节,实际上需要处理的核心内容,就是then方法,或者,我可以在这里确切的告诉大家,Promise的核心就是这个then方法,Promise中核心的核心是resolvePromise方法,接下来你就知道我为什么这么说了。

  constructor的代码暂时没有变化,这里就不再复制了,我们仅特别重要的关注then的变化,那么第一件要做的就是then方法会返回一个promise:

 1 then(onFulfilled, onRejected) {
 2   let p = new Promise((resolve, reject) => {
 3     if (this.status === FULFILLED) {
 4       onFulfilled(this.value);
 5     }
 6     if (this.status === REJECTED) {
 7       onRejected(this.reason);
 8     }
 9     if (this.status === PENDING) {
10       this.onResolvedCallbacks.push(onFulfilled);
11       this.onRejectedCallbacks.push(onRejected);
12     }
13   })
14   return p;
15 }

  啥也没干哈,就是返回了个新的promise,其实这也就是promise的链式调用。那问题来了,为啥我要把then的内容用一个新的promise包裹起来呢?既然要返回个promise,那我直接在代码的最后面,比如这样:

 1 then(onFulfilled, onRejected) {
 2   if (this.status === FULFILLED) {
 3     onFulfilled(this.value);
 4   }
 5   if (this.status === REJECTED) {
 6     onRejected(this.reason);
 7   }
 8   if (this.status === PENDING) {
 9     this.onResolvedCallbacks.push(onFulfilled);
10     this.onRejectedCallbacks.push(onRejected);
11   }
12   let p = new Promise((resolve, reject) => {
13   })
14   return p;
15 }

  那我这样不就可以了么?别忘了,我们还要把promise1的结果,传递给promise2,所以我们通过再生成一个新的promise2的内部去执行我们的回调。

  那么我们要如何把promise1的结果传给下一层呢?我们回头看下2.2.7.1,结果叫做x:

 1 then(onFulfilled, onRejected) {
 2   let p = new Promise((resolve, reject) => {
 3     if (this.status === FULFILLED) {
 4       setTimeout(() => {
 5         try {
 6           let x = onFulfilled(this.value);
 7           resolvePromise(p, x, resolve, reject);
 8         } catch (error) {
 9           reject(error);
10         }
11       }, 0);
12     }
13     if (this.status === REJECTED) {
14       setTimeout(() => {
15         try {
16           let x = onRejected(this.reason);
17           resolvePromise(p, x, resolve, reject);
18         } catch (error) {
19           reject(error);
20         }
21       }, 0);
22     }
23     if (this.status === PENDING) {
24       this.onResolvedCallbacks.push(() => {
25         setTimeout(() => {
26           try {
27             let x = onFulfilled(this.value);
28             resolvePromise(p, x, resolve, reject);
29           } catch (error) {
30             reject(error);
31           }
32         }, 0);
33       });
34       this.onRejectedCallbacks.push(() => {
35         setTimeout(() => {
36           try {
37             let x = onRejected(this.reason);
38             resolvePromise(p, x, resolve, reject);
39           } catch (error) {
40             reject(error);
41           }
42         }, 0);
43       });
44     }
45   });
46   return p;
47 }

  OK,这就是这一小节完整的then方法的部分了,甚至是整个promise实现的then方法也基本上跟这个差不多了,我们先来看当调用then方法的时候已经是fulfilled状态了的话,我们会获取到我们传给promise1的onFulfilled回调的结果作为x,这就是我们之前规范里所说的x,然后它走了一个resolvePromise,传了四个参数,并且把我们外面的那个p传了进去,那么假设,我没写外面的setTimeout,我能把p传给resolvePromise方法么?不能!!!因为我们想要在p还未生成之前就传给了内部的resolvePromise方法,这时候还没有p呢,所以我们利用事件循环机制,包了一层setTimeout,这样等到下一个tik整个p生成,我们就可以传给resolvePromise了。

  那么我们注意,无论在哪一个状态中,两种结果状态也就是fulfilled或rejected时,只要拿到了结果,就会走resolvePromise方法,只有try……catch报错了,才会直接抛出异常。那么这里的resolvePromise,其实就是我们前面没有翻译的那一段逻辑:Promise Resolution Procedure [[Resolve]](promise2, x),就这个。换句话说promise1的任何确定的状态结果,对于promise2来说都是要去resolve的,除非执行promise2的时候报错了。

  简单总结下:

  • then方法要返回个promise2。
  • then方法的成功或失败的回调函数的结果都是x。
  • x会传给resolvePromise做后续的处理。
  • 通过setTimeout的异步来使得resolvePromise可以获取到then方法内新生成的promise2。
  • 无论是失败还是成功,结果都是x,都会传给resolvePromise去做处理,同样的try……catch的报错会走promise1的reject。

四、实现完整的Promise

  那么这一小节,我们要实现完整的Promise,其实就是完善resolvePromise方法啦。在写代码之前,我们还是要来解读一下规范,我们就是照着规范写代码啦。

  Promise Resolution Procedure是一个会接收promise和x作为参数的一个抽象操作,我们把它标记为:[[Resolve]](promise, x)。如果x的表现形式是thenable的,也就是说如果x的结果是一个promise的话,那么假设x的行为与promise相似,则会试图使promise采用x的状态。

  这种thenable的处理允许promise之间的互相操作,只要这些promise的实现符合本规范的要求。它同样允许符合本规范的实现使用合理的then方法“同化”不符合的实现。

  [[Resolve]](promise, x)程序需要遵循以下步骤:

  2.3.1  如果promise和x引用自同一个对象,那么则抛出一个TypeError作为reason的reject状态。

  2.3.2  如果x是一个promise,则采用它的状态。通常,只有当x的实现是符合本规范的要求时,才会知道它是不是一个真正的承诺。本条规则允许使用特定于实现的方法来采用已知符合promise的状态。

    2.3.2.1  如果x是pending的状态,那么promise也必须保持pending状态,直到x的状态已变更为fulfilled或者rejected。

    2.3.2.2  如果x是fulfilled状态,那么就把promise的状态变更为fulfilled并使用与x一样的value。

    2.3.2.3  如果x是rejected状态,那么就把promise的状态变更为rejected并使用与x一样的reason。

  2.3.3  如果x是一个对象或者函数

    2.3.3.1  声明一个then变量存储x.then方法。这样做,其实就是为了缓存一下x.then的引用,那么当我们后续测试该引用,调用该引用的时候,都避免了多次调用x.then的访问。这些预防措施对于确保访问器属性的一致性非常重要,因为访问器属性的值可能在两次检索之间发生变化。

    2.3.3.2  如果我们在执行x.then后抛出了一个异常e,那么promise状态应修改为以e作为参数的rejected状态。

    2.3.3.3  如果then是一个函数,那么则调用then.call,把x作为call的第一个参数(也就是作为then的this),resolvePromise作为第二个参数,rejectPromise作为第三个参数,其中:

      2.3.3.3.1  如果resolvePromise被调用,并且使用y作为value,就执行[[Resolve]](promise, y)。

      2.3.3.3.2  如果rejectPromise被调用,并且使用r作为reason,就让promise的状态变为rejected。

      2.3.3.3.3  如果同时调用resolvePromise和rejectPromise或多次调用同一个,则第一个调用优先,并且任何进一步的调用都将被忽略。

      2.3.3.3.4  如果调用then方法抛出了一个错误e。

        2.3.3.3.4.1  如果resolvePromiserejectPromise已经被调用了,那么则忽略它。

        2.3.3.3.4.2  否则,把promise的状态变更为rejected,e作为reason。

    2.3.3.4  如果then不是一个一个函数,那么则把promise的状态变更为fulfilled,把x作为value。

  2.3.4  如果x不是一个函数或者对象,那么则把promise的状态变更为fulfilled,把x作为value。

  如果一个promise被一个参与循环的thenable链中的thenable所resolved,这样[[Resolve]](promise,thenable)的递归性质将最终导致再次调用[[Resolve]](promise,thenable),遵循上诉算法将导致无限递归。本规范鼓励但是并不要求一定要去检测这种无限递归,如果实现的话,那么此时promise的状态应该变成rejected并提供有效的错误信息作为reason。

  从实现上来说,不应该对可调用链的深度做任何限制,并假设超出该限制,递归将是无限的。只有确定的循环调用才会抛出TypeError。如果遇到无限的不同thenable链,则无限递归是正确的。

  好吧,这规范巴巴了好多。我建议要看一遍!我们继续上一小节的内容,去完善resolvePromise方法。

  首先2.3.1说了如果promise和x引用自同一个对象,那么抛出错误,这个简单,就这样被:

1 function resolvePromise(promise, x, resolve, reject) {
2   if (promise == x) {
3     return reject(
4       new TypeError("Chaining cycle detected for promise #<Promise>")
5     );
6   }
7 }

  那这样的场景什么时候才会出现呢?为什么x和promise不能相等呢?我们先来看个例子,首先我们在判断条件中添加一个打印,确定走到这个逻辑了:

1   if (promise == x) {
2     console.log("进来了");
3     return reject(
4       new TypeError("Chaining cycle detected for promise #<Promise>")
5     );
6   }

  然后例子是这样的:

 1 const p1 = new Promise((resolve, reject) => {
 2   resolve("success");
 3 });
 4 
 5 let p2 = p1.then((res) => {
 6   return p2;
 7 });
 8 p2.then(
 9   (value) => {
10     console.log("成功", value);
11   },
12   (reason) => {
13     console.log("失败", reason);
14   }
15 );

  执行这段代码,打印结果如下:

进来了
失败 TypeError: Chaining cycle detected for promise #<Promise>

  说明我们的代码没问题,那么我们得来分析下这段代码是如何执行的。在声明p1的时候,我们直接执行了excutor的resolve,所以此时的promise就已经是fulfilled的状态了。当我们再去调用then方法的时候,then方法会返回个promise,此时由于已经是fulfilled状态了,所以会命中if (this.status === FULFILLED)条件,那么此时的x就是调用onFulfilled方法的结果,这个x最终的结果就是p2,所以此时resolvePromise(p, x, resolve, reject)方法中的p和x是同一个,那么在Promise内部,我们要等待p2的执行结果,那么此时p2就即是执行的过程,又是等待的结果,所以p2永远都不会处于结果状态,于是我们要特殊处理这样无法得到最终结果的情况,reject出去。理解了吧?

  我们继续,再往后是2.3.2的解释,这块的解释我们在写代码的时候可以不去考虑,因为在写2.3.3的时候,可以覆盖到2.3.2的逻辑。那么:

 1 function resolvePromise(promise, x, resolve, reject) {
 2   if (promise == x) {
 3     console.log("进来了");
 4     return reject(
 5       new TypeError("Chaining cycle detected for promise #<Promise>")
 6     );
 7   }
 8   if ((typeof x === "object" && x !== null) || typeof x === "function") {
 9   } else {
10     resolve(x);
11   }
12 }

  着三行代码,就是2.3.3和2.3.4的逻辑框架,如果x是一个对象且不是null或者x是一个函数,那么要走一段逻辑,如果不符合这个条件的话说明是一个普通值,直接resolve就好了。这块很好理解,跟规范描述的一模一样。

  继续,2.3.3.1和2.3.3.2,当我们去取x.then的时候,可能会有报错,所以我们要try……catch处理一下:

1 if ((typeof x === "object" && x !== null) || typeof x === "function") {
2   try {
3     let then = x.then
4   } catch (error) {
5     reject(error)
6   }
7 } else {
8   resolve(x);
9 }

  就是这样。继续2.3.3.3:

 1 if ((typeof x === "object" && x !== null) || typeof x === "function") {
 2   try {
 3     let then = x.then;
 4     if (typeof then === "function") {
 5       then.call(
 6         x,
 7         (y) => {
 8           resolve(y)
 9         },
10         (r) => {
11           reject(r);
12         }
13       );
14     } else {
15       resolve(x);
16     }
17   } catch (error) {
18     reject(error);
19   }
20 } else {
21   resolve(x);
22 }

  我们看这段代码,跟2.3.3.3所说是一模一样的。我们调用then方法,把x作为this并且传了onFulfilled, onRejected两个函数作为参数,那么基本的核心逻辑我们就处理完了,但是还要补全一些细节,比如2.3.3.3.3所说,如果多次调用,只取第一次的,后面的调用都应该被忽略,那这个逻辑我们要怎么处理呢?再比如2.3.3.3.1所说,then在call的时候,如果resolvePromise被调用,并且使用y作为value,就执行[[Resolve]](promise, y),而不是像我们上面那样,直接resolve就完事了。所以我们要把resolve(y)修改成resolvePromise(promise, y, resolve, reject)。因为我们可能再返回一个promise,直到最后不是一个promise,也就是规范中所说的,允许任意递归调用。

  那么我们继续处理2.3.3.3.3这种情况:
 1 if ((typeof x === "object" && x !== null) || typeof x === "function") {
 2   let called = false;
 3   try {
 4     let then = x.then;
 5     if (typeof then === "function") {
 6       then.call(
 7         x,
 8         (y) => {
 9           if (called) return;
10           called = true;
11           resolvePromise(promise, y, resolve, reject);
12         },
13         (r) => {
14           if (called) return;
15           called = true;
16           reject(r);
17         }
18       );
19     } else {
20       resolve(x);
21     }
22   } catch (error) {
23     if (called) return;
24     called = true;
25     reject(error);
26   }
27 } else {
28   resolve(x);
29 }

  我们看代码,其实处理起来也并不复杂,我们在执行的时候,添加了一个flag,只要走到了某一个会修改promise状态的逻辑中,就会修改flag的状态,后续再调用就不会再去走逻辑代码了。也就是一旦状态确定,后续无论怎么调用,都是之前确定的状态,无法更改。

  那么其实到现在,核心的代码基本上就都完事了,其实你看,核心的代码其实就是resolvePromise这个方法,剩下的,我们还需要处理一点细节,比如2.2.1,onFulfilled, onRejected都是可选参数。我们稍微来处理一下then方法:

 1 then(onFulfilled, onRejected) {
 2   onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (v) => v;
 3   onRejected =
 4     typeof onRejected === "function"
 5       ? onRejected
 6       : (e) => {
 7           throw e;
 8         };
 9   // 后面的略了  
10 }

  看到没,代码很简单,如果没传,我们就自己造一个就好了。最后我们就写完了这个Promise的实现,完整代码可在:https://github.com/zakingwong/zaking-js-advanced/tree/promise这里查看。

  那么最后,我们还可以使用社区的工具库,来测试下我们所写的代码是否符合规范。这个我就不多说了,具体可以参考gitHub上的代码。

  既然代码我们都写完了,来玩两个例子吧。

 1 const zp1 = new ZakingPromise((resolve, reject) => {
 2   resolve("ok");
 3 }).then((data) => {
 4   return new Promise((resolve, reject) => {
 5     setTimeout(() => {
 6       resolve(data);
 7     }, 1000);
 8   });
 9 });
10 
11 zp1.then(
12   (data) => {
13     console.log(data, "zp1-resolve");
14   },
15   (err) => {
16     console.log(data, "zp1-reject");
17   }
18 );

  这里的ZakingPromise是我们自己手写的Promise,Promise就是ES6的Promise。我们来分析下这段代码,其实并不难噢。首先,ZakingPromise直接resolve出去了一个ok字符串,那么当我们调用then的时候,状态已经是fulfilled了,此时then里面执行的代码是这样的:

 1 let p = new Promise((resolve, reject) => {
 2   if (this.status === FULFILLED) {
 3     setTimeout(() => {
 4       try {
 5         let x = onFulfilled(this.value);
 6         resolvePromise(p, x, resolve, reject);
 7       } catch (error) {
 8         reject(error);
 9       }
10     }, 0);
11   }
12 }
13 return p

  pending和rejected都跟我没关系。就执行了上面这点代码,那么这里的onFulfilled就是我们传进来的这段代码:

1 (data) => {
2   return new Promise((resolve, reject) => {
3     setTimeout(() => {
4       resolve(data);
5     }, 1000);
6   });
7 }

  它返回了一个new Promise,所以此时的x可以理解为:

let x = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('ok');
  }, 1000);
});

  OK,那么我们继续,要去走resolvePromise这段代码了。那么resolvePromise判断逻辑就不走了哈,它肯定是个函数然后获取x.then,并且x.then肯定也是函数。那么里面的逻辑就相当于是这样执行的:

 1 new Promise((resolve, reject) => {
 2   setTimeout(() => {
 3     resolve("ok");
 4   }, 1000);
 5 }).then(
 6   (y) => {
 7     if (called) return;
 8     called = true;
 9     resolvePromise(promise, y, resolve, reject);
10   },
11   (r) => {
12     if (called) return;
13     called = true;
14     reject(r);
15   }
16 );

  这样是不是就很好理解了,那么我们就得去分析下上面的代码,还没调用then是如何执行的,就很简单了对吧,在Promise内部由于调用then的时候还没resolve,之前咱们分析过,所以then方法内存了两个缓存数组,当1秒后调用了resolve("ok")的时候,then里的onFulfilled回调就执行了,此时的y就是“ok”。注意,这里我省略了那个调用call时候的x,也就是此时then方法内部的this指向,那这个x、也就是this就是指这个new Promise他自己。

  于是我们再走这段代码:

1 zp1.then(
2   (data) => {
3     console.log(data, "zp1-resolve");
4   },
5   (err) => {
6     console.log(data, "zp1-reject");
7   }
8 );

  就走了zp1的onFulfilled回调,于是就打印了“ok zp1-resolve”。行吧,例子就这一个了吧暂时,大家要去多练练例子啊,把复杂的情况都梳理梳理。

五、实现Promise的其他方法

   诶?我记得Promise还有catch方法、all方法、还有race、还有finally,这些方法你咋没写呢?嗯,首先前四章所有翻译的内容就是Promise规范的所有内容,不信的话我在文末贴出了Promise/A+规范的地址,也就是说规范中压根就没有这些方法,这些方法都是ES6额外实现的,那么接下来我们就来实现下这些方法。

1、Promise.resolve、Promise.reject和Promise.catch方法的实现

  我们先来看下Promise.resolve和Promise.reject,其实实现起来很简单哈,我们先写个例子:

1 Promise.resolve("ok").then((data) => {
2   console.log(data, "resolve");
3 });

  我们看,调用Promise.resolve直接就返回了个promise的fulfilled状态,再去调用then的成功的回调,所以实现起来就是这样的:

1 static resolve(value) {
2   return new Promise((resolve, reject) => {
3     resolve(value);
4   });
5 }

  前面的那些代码我就不写了哈,但是这样还没完,我们再看个例子:

1 Promise.resolve(
2   new Promise((resolve, reject) => {
3     setTimeout(() => {
4       resolve("Zaking");
5     }, 1000);
6   })
7 ).then((data) => {
8   console.log(data, "resolve----");
9 });

  你猜,按照我们之前实现的代码,这个打印的结果是什么。

Promise {
  status: 'PENDING',
  value: undefined,
  reason: undefined,
  onResolvedCallbacks: [],
  onRejectedCallbacks: []
} resolve----

  为什么会这样呢?按道理不应该是Zaking这个字符串么?ES6实现的是这样的,但是咱们之前的代码并没有做这个的处理,其实这里的resolve方法,不就是包裹了一层Promise后执行了resolve嘛,所以当我们调用Promise.resolve的时候,上面例子的代码中,传给Promise.resolve的那个新的promise被当作value返回了,所以这里我们要添加点代码处理下:

 1 class Promise {
 2   constructor(excutor) {
 3     // ...
 4     const resolve = (value) => {
 5       if (value instanceof Promise) {
 6         return value.then(resolve, reject);
 7       }
 8       if (this.status === PENDING) {
 9         this.value = value;
10         this.status = FULFILLED;
11         this.onResolvedCallbacks.forEach((cb) => cb(this.value));
12       }
13     };
14     // ...
15   }
16   // ...
17 }

  我们判断一下传入的value是不是一个Promise的实例,如果是的话,那么就再调用一下then,这样就可以把结果传递到下一层了。这样,我们打印的结果就符合ES6的实现了,注意,这个跟规范无关了噢。

Zaking resolve----

  你猜Promise.reject这个方法怎么实现?我不写了噢,你自己试试!要注意的是,resolve一个Promise会等待解析后的结果,但是reject一个Promise会直接走向失败。

  那么接下来我们来实现一个更简单的方法,Promise.catct:

1 catch(errCb) {
2   return this.then(null, errCb);
3 }

  就这么简单,其实catch方法本质上就是then中的onRejected这个回调,那么我们直接调用就好了,不传onFulfilled只传onRejected。

2、Promise.all的实现

  all方法其实很好理解,就是所有的回调都成功了,才算是成功,我们看个例子:

 1 Promise.all([
 2   new Promise((resolve, reject) => {
 3     resolve("1");
 4   }),
 5   new Promise((resolve, reject) => {
 6     resolve("2");
 7   }),
 8 ]).then((data) => {
 9   console.log(data, "all");
10 });

  就是这样,all方法会接收一个都是Promise的数组,然后内部会去处理这个数组,我们就来看看是怎么处理的吧:

 1 static all(promises) {
 2   let result = [];
 3   let times = 0;
 4   return new Promise((resolve, reject) => {
 5     function processResult(data, index) {
 6       result[index] = data;
 7       if (++times === promises.length) {
 8         resolve(result);
 9       }
10     }
11     for (let i = 0; i < promises.length; i++) {
12       const promise = promises[i];
13       Promise.resolve(promise).then((data) => {
14         processResult(data, i);
15       }, reject);
16     }
17   });
18 }

  其实你看代码并不多的,我们来分析下吧。首先我们声明了两个变量,一个存储结果的数组,这个结果是指resolve成功后的onFulfilled回调的value,一个是计数器。然后我们去循环整个传入的promises,让每一个promise传递给Promise.resolve去执行,然后我们用一个processResult去处理返回的data和当前的下标i,然后我们还要处理一下reject,那么这里要注意哈,对于all方法来说,只要有一个出错了,那么整个all执行的结果就是rejected的,所以reject不用特殊处理,直接reject就好了,不需要添加进数组这个那个的。

  那么继续,processResult每当我们执行一次的时候,就会根据传入的下标的位置去存储结果,这样处理其实就是为了按照传入promise的先后顺序去存储结果,然后先++times再去和promises的length长度去做比较,换句话说就是计数嘛,如果相等,就直接resolve最终的result即可。并不是很复杂噢。

3、Promise.race的实现

  这个race是什么意思呢,我们先看个例子:

const p = Promise.race([p1, p2, p3]);

  上面代码中,只要p1p2p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。换句话说就是,只要有一个结果就行了,不管这个结果是啥。谁跑得快我就算谁是第一,这就是race的意思。那既然是谁快我选谁,那我们代码要怎么写?循环一下全部执行一遍呗,谁有结果了就完事了呗:

1 static race(promises) {
2   return new Promise((resolve, reject) => {
3     for (let i = 0; i < promises.length; i++) {
4       let promise = promises[i];
5       Promise.resolve(promise).then(resolve, reject);
6     }
7   });
8 }

  嗯……就这么简单,其实就是all的那部分删除了一些~~

4、Promise.allSettled的实现

  这个方法是啥意思呢,就是不管成功或失败,会返回所有异步的结果。诶?那不是跟all方法很类似,只要修改一下all方法不就可以了,没错,你可真是个小聪明:

 1 static allSettled(promises) {
 2   let result = [];
 3   let times = 0;
 4   return new Promise((resolve, reject) => {
 5     function processResult(data, index, status) {
 6       result[index] = { status, value: data };
 7       if (++times === promises.length) {
 8         resolve(result);
 9       }
10     }
11     for (let i = 0; i < promises.length; i++) {
12       const promise = promises[i];
13       Promise.resolve(promise).then(
14         (data) => {
15           processResult(data, i, "fulfilled");
16         },
17         (err) => {
18           processResult(err, i, "rejected");
19         }
20       );
21     }
22   });
23 }

  你看跟all方法有啥区别?无非就是额外处理了onRejected,直接onRejected就直接失败了,现在回去走processResult方法也存到result中,当然,result存的内容也不太一样,多了个状态,会告诉你是失败的结果还是成功的结果。不复杂吧,其实就是all方法。

5、Promise.finally的实现

  finally方法用于指定不管Promise对象最后的状态如何,都会执行的操作,就是我不管你Promise最后是fulfilled还是rejected,都会执行finally的回调。那我们来看是咋实现的吧:

 1 finally(finallyCallback) {
 2   let p = this.constructor;
 3   return this.then(
 4     (data) => {
 5       return p.resolve(finallyCallback()).then(() => data);
 6     },
 7     (err) => {
 8       return p.resolve(finallyCallback()).then(() => {
 9         throw err;
10       });
11     }
12   );
13 }

  其实代码不难,但是这里面还是有点东西的。为什么我在this.then中又调用了p.resolve并且传了finally的finallyCallback回调?我直接这样写不行么?

 1 finally(finallyCallback) {
 2   return this.then(
 3     (data) => {
 4       finallyCallback()
 5       return data;
 6     },
 7     (err) => {
 8       finallyCallback()
 9       throw err;
10     }
11   );
12 }

  调用finallyCallback,返回结果。好像挺完美的。但是,不太行,因为按照上面的finally实现,你这样去写Promise的用法:

 1 Promise.resolve("zaking-finally")
 2   .finally(() => {
 3     console.log("finally~~~");
 4   })
 5   .then((data) => {
 6     console.log(data, "finally-resolved");
 7   })
 8   .catch((err) => {
 9     console.log(err, "finally-rejected");
10   });

  或者这样:

 1 Promise.resolve("zaking-finally")
 2   .finally(() => {
 3     console.log("finally~~~");
 4     return 1;
 5   })
 6   .then((data) => {
 7     console.log(data, "finally-resolved");
 8   })
 9   .catch((err) => {
10     console.log(err, "finally-rejected");
11   });

  都没问题,但是因为finallyCallback有可能是异步的,所以我们需要额外的包裹一层,再去执行最终的onFulfilled或者onRejected。比如这样:

 1 Promise.resolve("zaking-finally")
 2   .finally(() => {
 3     return new Promise((resolve, reject) => {
 4       setTimeout(() => {
 5         resolve();
 6         console.log("finally");
 7       }, 1000);
 8     });
 9   })
10   .then((data) => {
11     console.log(data, "finally-resolved");
12   })
13   .catch((err) => {
14     console.log(err, "finally-rejected");
15   });

  那么本章所有的内容就都完事了,当然我们并没有实现所有的方法,如果你真的理解了,完全可以自己去实现了,比如any方法和try方法,甚至于你可以自己去创造某些方法,因为Promise/A+规范范围内的所有内容,其实就那么点,其他的都是实现罢了,你看我讲了五个方法,实际上只讲了all和finally这两个方法。

6、promisify

  最后我们来聊一聊promisify,也是这篇文章最后的一点内容,promisify其实是Node.js提供的可以把普通带回调的函数,转换成promise对象的工具方法。我们先来看个例子,怎么用promisify:

 1 function testA(a, b, cb) {
 2   cb(null, a + b);
 3 }
 4 
 5 let A = promisify(testA);
 6 A(1, 2).then(
 7   (data) => {
 8     console.log(data, "data-----");
 9   },
10   (err) => {
11     console.log(err);
12   }
13 );

  上面的代码,首先testA是一个带有回调函数作为参数的方法,当然这是一个同步回调,然后要注意的是,cb在testA中必须是最后一个参数,而执行cb的时候,第一个参数必须是错误处理的回调函数,这里我们直接用null代替了,然后,我们通过promisify方法,包裹了一下testA,生成了一个A方法,那么此时的A就是一个Promise对象了噢,然后调用Promise的then方法,传入onFulfilled和onRejected两个回调,其实这里的onFulfilled就可以理解成是cb,而onRejected就是那个null。那么我们来看下实现,代码很少:

 1 function promisify(fn) {
 2   return function (...args) {
 3     return new Promise((resolve, reject) => {
 4       fn(...args, function (err, data) {
 5         if (err) return reject(err);
 6         resolve(data);
 7       });
 8     });
 9   };
10 }

  好嘞,那么我们依照实现和例子代码,我们来分析下这个promisify是如何运行的。首先,promisify返回了一个函数,那么这个返回的函数,就是我们例子中的A方法,A传入的参数1,2也同样在promisify返回的function中通过rest参数来处理的,从而获取到我们传入的参数。然后,我们在返回的函数内部又返回了一个Promise。我们先不管这个Promise,咱们删除点东西再看一下:

1 function promisify(fn) {
2   return function (...args) {
3     return new Promise((resolve, reject) => {
4       fn();
5     });
6   };
7 }

  我们看,其实就是在返回的Promise内部执行了一下我们传入的testA方法,只不过他回调前面的参数都用rest参数的方式获取到了,那么我们testA的第三个参数就是这里的:

1 function (err, data) {
2     if (err) return reject(err);
3     resolve(data);
4 }

  这一部分,就是testA内部执行的cb了呗。err就是我们传的null,data就是那个a + b。简单吧?其实一点都不复杂。

  那你可能会问为啥要这样固定的去写testA方法呢,回调必须是最后一个参数,错误的回调还必须是回调函数的第一个参数,嗯。。是因为node的实现是这样的~~

  最后,再补充一点,这个东西理解了promisify后就很简单了,不多说了,也就是promisifyAll方法,接收一个对象作为参数:

1 function promisifyAll(obj) {
2   let result = {};
3   for (let key in obj) {
4     result[key] =
5       typeof obj[key] === "function" ? promisify(obj[key]) : obj[key];
6   }
7   return result;
8 }

  很简单,就是生成一个新的对象result,如果传入的obj中的某个key是函数,就走一下promisify方法转换,最终返回result结果对象。

 

  附:

 

  最后:由于本人能力有限,感觉写的内容并未完全覆盖使用场景,大家见谅,但是还是有参考价值的~额~~然后我第一次尝试加行号,结果博客园的行号会一起复制下来,不太友好,所以特别建议大家手打代码,嘿嘿。

posted @ 2022-07-19 13:49  Zaking  阅读(619)  评论(2编辑  收藏  举报