资讯专栏INFORMATION COLUMN

30分钟,让你彻底明白Promise原理

Profeel / 911人阅读

摘要:链式是指在当前达到状态后,即开始进行下一个后邻。在中发现没有指定异步操作失败的回调时,会直接将函数返回的,后同设为状态,如此达成执行后续失败回调的效果。

原文链接

前言

前一阵子记录了promise的一些常规用法,这篇文章再深入一个层次,来分析分析promise的这种规则机制是如何实现的。ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不是太了解,可以移步我的上一篇博文。

本文的promise源码是按照Promise/A+规范来编写的(不想看英文版的移步Promise/A+规范中文翻译)

引子

为了让大家更容易理解,我们从一个场景开始讲解,让大家一步一步跟着思路思考,相信你一定会更容易看懂。

考虑下面一种获取用户id的请求处理

</>复制代码

  1. //例1
  2. function getUserId() {
  3. return new Promise(function(resolve) {
  4. //异步请求
  5. http.get(url, function(results) {
  6. resolve(results.id)
  7. })
  8. })
  9. }
  10. getUserId().then(function(id) {
  11. //一些处理
  12. })

getUserId方法返回一个promise,可以通过它的then方法注册(注意注册这个词)在promise异步操作成功时执行的回调。这种执行方式,使得异步调用变得十分顺手。

原理剖析

那么类似这种功能的Promise怎么实现呢?其实按照上面一句话,实现一个最基础的雏形还是很easy的。

极简promise雏形

</>复制代码

  1. function Promise(fn) {
  2. var value = null,
  3. callbacks = []; //callbacks为数组,因为可能同时有很多个回调
  4. this.then = function (onFulfilled) {
  5. callbacks.push(onFulfilled);
  6. };
  7. function resolve(value) {
  8. callbacks.forEach(function (callback) {
  9. callback(value);
  10. });
  11. }
  12. fn(resolve);
  13. }

上述代码很简单,大致的逻辑是这样的:

调用then方法,将想要在Promise异步操作成功时执行的回调放入callbacks队列,其实也就是注册回调函数,可以向观察者模式方向思考;

创建Promise实例时传入的函数会被赋予一个函数类型的参数,即resolve,它接收一个参数value,代表异步操作返回的结果,当一步操作执行成功后,用户会调用resolve方法,这时候其实真正执行的操作是将callbacks队列中的回调一一执行;

可以结合例1中的代码来看,首先new Promise时,传给promise的函数发送异步请求,接着调用promise对象的then属性,注册请求成功的回调函数,然后当异步请求发送成功时,调用resolve(results.id)方法, 该方法执行then方法注册的回调数组。

相信仔细的人应该可以看出来,then方法应该能够链式调用,但是上面的最基础简单的版本显然无法支持链式调用。想让then方法支持链式调用,其实也是很简单的:

</>复制代码

  1. this.then = function (onFulfilled) {
  2. callbacks.push(onFulfilled);
  3. return this;
  4. };

see?只要简单一句话就可以实现类似下面的链式调用:

</>复制代码

  1. // 例2
  2. getUserId().then(function (id) {
  3. // 一些处理
  4. }).then(function (id) {
  5. // 一些处理
  6. });
加入延时机制

细心的同学应该发现,上述代码可能还存在一个问题:如果在then方法注册回调之前,resolve函数就执行了,怎么办?比如promise内部的函数是同步函数:

</>复制代码

  1. // 例3
  2. function getUserId() {
  3. return new Promise(function (resolve) {
  4. resolve(9876);
  5. });
  6. }
  7. getUserId().then(function (id) {
  8. // 一些处理
  9. });

这显然是不允许的,Promises/A+规范明确要求回调需要通过异步方式执行,用以保证一致可靠的执行顺序。因此我们要加入一些处理,保证在resolve执行之前,then方法已经注册完所有的回调。我们可以这样改造下resolve函数:

</>复制代码

  1. function resolve(value) {
  2. setTimeout(function() {
  3. callbacks.forEach(function (callback) {
  4. callback(value);
  5. });
  6. }, 0)
  7. }

上述代码的思路也很简单,就是通过setTimeout机制,将resolve中执行回调的逻辑放置到JS任务队列末尾,以保证在resolve执行时,then方法的回调函数已经注册完成.

但是,这样好像还存在一个问题,可以细想一下:如果Promise异步操作已经成功,这时,在异步操作成功之前注册的回调都会执行,但是在Promise异步操作成功这之后调用的then注册的回调就再也不会执行了,这显然不是我们想要的。

加入状态

恩,为了解决上一节抛出的问题,我们必须加入状态机制,也就是大家熟知的pendingfulfilledrejected

Promises/A+规范中的2.1Promise States中明确规定了,pending可以转化为fulfilledrejected并且只能转化一次,也就是说如果pending转化到fulfilled状态,那么就不能再转化到rejected。并且fulfilledrejected状态只能由pending转化而来,两者之间不能互相转换。一图胜千言:

改进后的代码是这样的:

</>复制代码

  1. function Promise(fn) {
  2. var state = "pending",
  3. value = null,
  4. callbacks = [];
  5. this.then = function (onFulfilled) {
  6. if (state === "pending") {
  7. callbacks.push(onFulfilled);
  8. return this;
  9. }
  10. onFulfilled(value);
  11. return this;
  12. };
  13. function resolve(newValue) {
  14. value = newValue;
  15. state = "fulfilled";
  16. setTimeout(function () {
  17. callbacks.forEach(function (callback) {
  18. callback(value);
  19. });
  20. }, 0);
  21. }
  22. fn(resolve);
  23. }

上述代码的思路是这样的:resolve执行时,会将状态设置为fulfilled,在此之后调用then添加的新回调,都会立即执行。

这里没有任何地方将state设为rejected,为了让大家聚焦在核心代码上,这个问题后面会有一小节专门加入。

链式Promise

那么这里问题又来了,如果用户再then函数里面注册的仍然是一个Promise,该如何解决?比如下面的例4

</>复制代码

  1. // 例4
  2. getUserId()
  3. .then(getUserJobById)
  4. .then(function (job) {
  5. // 对job的处理
  6. });
  7. function getUserJobById(id) {
  8. return new Promise(function (resolve) {
  9. http.get(baseUrl + id, function(job) {
  10. resolve(job);
  11. });
  12. });
  13. }

这种场景相信用过promise的人都知道会有很多,那么类似这种就是所谓的链式Promise

链式Promise是指在当前promise达到fulfilled状态后,即开始进行下一个promise(后邻promise)。那么我们如何衔接当前promise和后邻promise呢?(这是这里的难点)。

其实也不是辣么难,只要在then方法里面return一个promise就好啦。Promises/A+规范中的2.2.7就是这么说哒(微笑脸)~

下面来看看这段暗藏玄机的then方法和resolve方法改造代码:

</>复制代码

  1. function Promise(fn) {
  2. var state = "pending",
  3. value = null,
  4. callbacks = [];
  5. this.then = function (onFulfilled) {
  6. return new Promise(function (resolve) {
  7. handle({
  8. onFulfilled: onFulfilled || null,
  9. resolve: resolve
  10. });
  11. });
  12. };
  13. function handle(callback) {
  14. if (state === "pending") {
  15. callbacks.push(callback);
  16. return;
  17. }
  18. //如果then中没有传递任何东西
  19. if(!callback.onFulfilled) {
  20. callback.resolve(value);
  21. return;
  22. }
  23. var ret = callback.onFulfilled(value);
  24. callback.resolve(ret);
  25. }
  26. function resolve(newValue) {
  27. if (newValue && (typeof newValue === "object" || typeof newValue === "function")) {
  28. var then = newValue.then;
  29. if (typeof then === "function") {
  30. then.call(newValue, resolve);
  31. return;
  32. }
  33. }
  34. state = "fulfilled";
  35. value = newValue;
  36. setTimeout(function () {
  37. callbacks.forEach(function (callback) {
  38. handle(callback);
  39. });
  40. }, 0);
  41. }
  42. fn(resolve);
  43. }

我们结合例4的代码,分析下上面的代码逻辑,为了方便阅读,我把例4的代码贴在这里:

</>复制代码

  1. // 例4
  2. getUserId()
  3. .then(getUserJobById)
  4. .then(function (job) {
  5. // 对job的处理
  6. });
  7. function getUserJobById(id) {
  8. return new Promise(function (resolve) {
  9. http.get(baseUrl + id, function(job) {
  10. resolve(job);
  11. });
  12. });
  13. }

then方法中,创建并返回了新的Promise实例,这是串行Promise的基础,并且支持链式调用。

handle方法是promise内部的方法。then方法传入的形参onFulfilled以及创建新Promise实例时传入的resolve均被push到当前promisecallbacks队列中,这是衔接当前promise和后邻promise的关键所在(这里一定要好好的分析下handle的作用)。

getUserId生成的promise(简称getUserId promise)异步操作成功,执行其内部方法resolve,传入的参数正是异步操作的结果id

调用handle方法处理callbacks队列中的回调:getUserJobById方法,生成新的promisegetUserJobById promise

执行之前由getUserId promisethen方法生成的新promise(称为bridge promise)的resolve方法,传入参数为getUserJobById promise。这种情况下,会将该resolve方法传入getUserJobById promisethen方法中,并直接返回。

getUserJobById promise异步操作成功时,执行其callbacks中的回调:getUserId bridge promise中的resolve方法

最后执行getUserId bridge promise的后邻promisecallbacks中的回调。

更直白的可以看下面的图,一图胜千言(都是根据自己的理解画出来的,如有不对欢迎指正):

失败处理

在异步操作失败时,标记其状态为rejected,并执行注册的失败回调:

</>复制代码

  1. //例5
  2. function getUserId() {
  3. return new Promise(function(resolve) {
  4. //异步请求
  5. http.get(url, function(error, results) {
  6. if (error) {
  7. reject(error);
  8. }
  9. resolve(results.id)
  10. })
  11. })
  12. }
  13. getUserId().then(function(id) {
  14. //一些处理
  15. }, function(error) {
  16. console.log(error)
  17. })

有了之前处理fulfilled状态的经验,支持错误处理变得很容易,只需要在注册回调、处理状态变更上都要加入新的逻辑:

</>复制代码

  1. function Promise(fn) {
  2. var state = "pending",
  3. value = null,
  4. callbacks = [];
  5. this.then = function (onFulfilled, onRejected) {
  6. return new Promise(function (resolve, reject) {
  7. handle({
  8. onFulfilled: onFulfilled || null,
  9. onRejected: onRejected || null,
  10. resolve: resolve,
  11. reject: reject
  12. });
  13. });
  14. };
  15. function handle(callback) {
  16. if (state === "pending") {
  17. callbacks.push(callback);
  18. return;
  19. }
  20. var cb = state === "fulfilled" ? callback.onFulfilled : callback.onRejected,
  21. ret;
  22. if (cb === null) {
  23. cb = state === "fulfilled" ? callback.resolve : callback.reject;
  24. cb(value);
  25. return;
  26. }
  27. ret = cb(value);
  28. callback.resolve(ret);
  29. }
  30. function resolve(newValue) {
  31. if (newValue && (typeof newValue === "object" || typeof newValue === "function")) {
  32. var then = newValue.then;
  33. if (typeof then === "function") {
  34. then.call(newValue, resolve, reject);
  35. return;
  36. }
  37. }
  38. state = "fulfilled";
  39. value = newValue;
  40. execute();
  41. }
  42. function reject(reason) {
  43. state = "rejected";
  44. value = reason;
  45. execute();
  46. }
  47. function execute() {
  48. setTimeout(function () {
  49. callbacks.forEach(function (callback) {
  50. handle(callback);
  51. });
  52. }, 0);
  53. }
  54. fn(resolve, reject);
  55. }

上述代码增加了新的reject方法,供异步操作失败时调用,同时抽出了resolvereject共用的部分,形成execute方法。

错误冒泡是上述代码已经支持,且非常实用的一个特性。在handle中发现没有指定异步操作失败的回调时,会直接将bridge promise(then函数返回的promise,后同)设为rejected状态,如此达成执行后续失败回调的效果。这有利于简化串行Promise的失败处理成本,因为一组异步操作往往会对应一个实际功能,失败处理方法通常是一致的:

</>复制代码

  1. //例6
  2. getUserId()
  3. .then(getUserJobById)
  4. .then(function (job) {
  5. // 处理job
  6. }, function (error) {
  7. // getUserId或者getUerJobById时出现的错误
  8. console.log(error);
  9. });
异常处理

细心的同学会想到:如果在执行成功回调、失败回调时代码出错怎么办?对于这类异常,可以使用try-catch捕获错误,并将bridge promise设为rejected状态。handle方法改造如下:

</>复制代码

  1. function handle(callback) {
  2. if (state === "pending") {
  3. callbacks.push(callback);
  4. return;
  5. }
  6. var cb = state === "fulfilled" ? callback.onFulfilled : callback.onRejected,
  7. ret;
  8. if (cb === null) {
  9. cb = state === "fulfilled" ? callback.resolve : callback.reject;
  10. cb(value);
  11. return;
  12. }
  13. try {
  14. ret = cb(value);
  15. callback.resolve(ret);
  16. } catch (e) {
  17. callback.reject(e);
  18. }
  19. }

如果在异步操作中,多次执行resolve或者reject会重复处理后续回调,可以通过内置一个标志位解决。

总结

刚开始看promise源码的时候总不能很好的理解then和resolve函数的运行机理,但是如果你静下心来,反过来根据执行promise时的逻辑来推演,就不难理解了。这里一定要注意的点是:promise里面的then函数仅仅是注册了后续需要执行的代码,真正的执行是在resolve方法里面执行的,理清了这层,再来分析源码会省力的多。

现在回顾下Promise的实现过程,其主要使用了设计模式中的观察者模式:

通过Promise.prototype.then和Promise.prototype.catch方法将观察者方法注册到被观察者Promise对象中,同时返回一个新的Promise对象,以便可以链式调用。

被观察者管理内部pending、fulfilled和rejected的状态转变,同时通过构造函数中传递的resolve和reject方法以主动触发状态转变和通知观察者。

参考文献

深入理解 Promise
JavaScript Promises ... In Wicked Detail

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83085.html

相关文章

  • JavasScript重难点知识

    摘要:忍者级别的函数操作对于什么是匿名函数,这里就不做过多介绍了。我们需要知道的是,对于而言,匿名函数是一个很重要且具有逻辑性的特性。通常,匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果...

    forsigner 评论0 收藏0
  • 前端基础

    摘要:谈起闭包,它可是两个核心技术之一异步基于打造前端持续集成开发环境本文将以一个标准的项目为例,完全抛弃传统的前端项目开发部署方式,基于容器技术打造一个精简的前端持续集成的开发环境。 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我。 不论你是javascript新手还是老鸟,不论是面试求职,还是日...

    graf 评论0 收藏0
  • 异步读取文件的几种姿势

    摘要:臆想的针对读取到的内容进行操作,比如打印文件内容臆想中,读取文件是有返回值的,将返回值,即文件内容,赋给一个变量,然后决定对读取到的内容进行相应的操作,例如打印文件中的内容。 臆想的 let fs = require(fs) function readFile(filename){ ... } let content = readFile(config.js) // 针对读...

    chinafgj 评论0 收藏0
  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0
  • Promise之深入浅出

    摘要:不兼容问题,本文不予以处理,出门左转,找谷哥。如果中的回调函数抛出一个错误,那么返回的将会成为拒绝状态,并且将抛出的错误作为拒绝状态的回调函数的参数值。 Promise与async 主要内容: promise基本实现原理 promise 使用中难点(链式调用,API基本上返回都是一个新Promise,及参数传递) promise 对异常处理 参考: ​ 30分钟,让你彻底明...

    littleGrow 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<