资讯专栏INFORMATION COLUMN

ES6中promise如何实现

sushi / 1452人阅读

摘要:这下不管是同步还是异步,我们随时可以在方法中去取值,如果值没有被,也就是说状态没发生变化,将给我们记录下这件事,等到的那个时间点把值传给方法中那个回调函数,。

一本正经的扯淡

顾名思义,promise中文意思就是承诺,也就是现在实现不了将来•••••,但是将来这玩意谁说的准呢。就像你去泡妞,你可能许下各种诺言,但能不能实现,完全取决于你这人靠不靠谱。好在计算机不是人,不是人,不是人,••••正因为不是人,所以它许下的承诺,它就一定会给你一个结果。
等待承诺实现的过程中很漫长,所以你可以做一些其它的事情,没必要老是堵在这一条道上,也就是异步。打个比方,你打电话给饭店老板叫了个外卖,老板告诉你,10分钟后送过去,也就是说老板给了你一个承诺,于是你等啊等,这中间又去上了个厕所,玩了会手机••••••,这就是异步,老板给的承诺并没有妨碍你干其它的事情。OK,扯淡结束。

一、promise这妞有啥好

为了实现异步,一般要设置一个回调函数

</>复制代码

  1. setTimeout(function(){
  2. console.log(1);
  3. setTimeout(function(){
  4. console.log(2);
  5. setTimeout(function(){
  6. console.log(3);
  7. setTimeout(function(){
  8. console.log(4);
  9. setTimeout(function(){
  10. console.log(5);
  11. },500)
  12. },400)
  13. },300)
  14. },200)
  15. },100);

••••••有没有一种想死的感觉!
promise最大优势就是第一消灭了这种回调地狱,第二增加了错误捕获,像下面这种,

</>复制代码

  1. promis.then(function (response) {
  2. //do something;
  3. }, function (reason) {
  4. //get error
  5. }).then(function (response) {
  6. //do something;
  7. }, function (reason) {
  8. //get error
  9. }).then(function (response) {
  10. //do something;
  11. }, function (reason) {
  12. //get error
  13. });

如果不做错误处理则更清晰

</>复制代码

  1. promis.then(function (response) {
  2. //do something;
  3. }).then(function (response) {
  4. //do something;
  5. }).then(function (response) {
  6. //do something;
  7. }).then(function (response) {
  8. //do something;
  9. });

它使得异步的代码看起来像是在同步执行,大大增强了代码的可读性。
美中不足的是你得写一堆的.then(function(){},function(){}),但是和回调地狱相比,忍了。
在ES7中会有号称是异步的终极解决方案,async和await,那是后话。

二、这妞性格怎么样

前面说了,计算机不是人,所以它许下的承诺,它一定会给你一个结果,不管这个承诺的结果是接受还是拒绝。
所以,第一,promise一定会返回一个结果。
第二,这个结果是不可逆的,你只能接受,本质是因为promise的状态不可逆,一旦它变成了resolve或者reject,你休想再让你变成pending,否则,它要会说话,肯定回你的只有一个字,滚!
第三、promise的结果什么时候返回,你说了不算,你去泡妞的时候,妞也不一定当场就答应你吧,或许想个三、五天也说不定,这个主动权不是掌握在你手中的。
第四、ES6的promise执行过程中,你是无法获得执行的进度的,到底它现在是pending还是resolve,还是reject。就好像妞和她的闺蜜探讨要不要接受你,你是打听不到的。当然并不是完全不能,例如angularjs的$q实现一个notify方法,可以获取到执行进度的通知。
最后说一点儿你的权力,你能决定的是在什么时候去取promise的结果,也就是调用then方法的时间,就好像你每天追着妞问,你想好没有••••••,妞这个时候会有三种回答,一是答应你,二是拒绝你,三是还得再想想,XXXX时候再告诉你••••,也就说这TMD又是一个承诺•••••。
咳、咳,现在开始必须严肃点,毕竟技术是一件严肃的事情。

三、漂亮的妞,是个男人就会有想法

说白了,promise就是一个对象,一个只能通过then方法来取得它上面的值的对象。
在es6中,你只要大喊一句,妞,给我个承诺,它就会给你一个promise,就像下面这样:

</>复制代码

  1. var promise = new Promise(function(resolve,reject){
  2. //do something;
  3. })

然后你就可以调用它的then方法去取值,那么从这个角度看,这个构造函数一定是返回了一个带有then方法的对象。另外还有状态,状态的变化不可逆。再加上些其它的方法,如all、catch•••,不过不要着急,我们一步一步来意淫出这个漂亮的妞••••
1、通常情况,我们使用回调一个函数内执行另外一个函数:

</>复制代码

  1. function doSomething(callback){
  2. console.log("do something");
  3. callback();
  4. }
  5. doSomething(function(){
  6. console.log("a");
  7. });

2、但是在使用promise时,我们是用then方法去取结果,而promise就是个对象,那么上面的代码看起来应该这样写:

</>复制代码

  1. function doSomething(){
  2. console.log("a");
  3. return {
  4. then: function(callback){
  5. var value = 1;
  6. callback(value);
  7. }
  8. }
  9. }
  10. doSomething().then(function(res){
  11. console.log(res);
  12. });

在这里,我们调用dosomething函数时,返回了一个带有then方法的对象,然后在then方法回调中去执行,现在看来是不是有那么点样子了,时刻记得两件事,对象, then方法。
3、在ES6中Promise是一个构造函数,这简单,给这个dosomething换个名字,

</>复制代码

  1. function Promise(){
  2. this.then = function(callback){
  3. var value = 1;
  4. callback(value);
  5. }
  6. }

在实例化promise的时候,要传一个函数进去,这也简单

</>复制代码

  1. function Promise(fn){
  2. this.then = function(callback){
  3. callback();
  4. }
  5. }

实例化传入的函数fn中(下文中的fn都是指代这个匿名函数),你会传入2个参数,一个叫resolve,另一个叫reject,为了简单起见,我们不考虑reject,它的道理和resolve是一样的。那么就像这样:

</>复制代码

  1. var promise = new Promise(function(resolve){
  2. var value = 1;
  3. resolve(value);
  4. })

即然传了一个fn函数进去,那么在实例化过程中,这个函数一定会在某个时刻执行。执行时,它又会接收到一个参数resolve,这个resolve一定是一个函数,这点从上面就可以很明显的看出来,resolve在实例化时执行了,而且接收到了一个参数,在这里是变量value。那么Promise函数内部很可能是这样:

</>复制代码

  1. function Promise(fn){
  2. function resolve(value){}
  3. this.then = function (onResolved) {};
  4. fn(resolve);
  5. }

为了看起来更直接,这里我们把调用then方法传的第一个函数就叫做onResolved,那么接下来我们应该考虑在实例化的时候,还有什么事情要做,在then方法的回调函数中我们希望得到promise的值,这个值是在fn函数调用后被resolve函数运算后得到的,最终要在onResolved函数中拿到,也就是说,我们必须在resolve中将这个值传递给onResolved,迂回一下:

</>复制代码

  1. function Promise(fn) {
  2. var callback = null;
  3. function resolve(value) {
  4. callback(value);
  5. }
  6. this.then = function(onResolved) {
  7. callback = onResolved;
  8. };
  9. fn(resolve);
  10. }

但是这里有一个问题,就是我们调用resolve方法时,还没有调用过then方法,因此callbak是null,浏览器报错:callback is not a function,这里hack下,让resolve方法的执行在then之后。

</>复制代码

  1. function Promise(fn) {
  2. var callback = null;
  3. function resolve(value) {
  4. setTimeout(function(){
  5. callback(value);
  6. },0)
  7. }
  8. this.then = function(onResolved) {
  9. callback = onResolved;
  10. };
  11. fn(resolve);
  12. }

执行一下,

</>复制代码

  1. var promise = new Promise(function(res){
  2. var value = 2;
  3. res(2);
  4. });
  5. promise.then(function(res){
  6. console.log(res);
  7. })

OK,成功的输出。目前为止,promise的轮廓算是被我们意淫出来了。
4、promise是有状态的,而且状态不可逆,同样的为了简单起见,我先来搞定从pending变到resolved,那么rejected也一样。仔细想下,执行了resolve方法后可以得到一个resolved状态的值,那么必然在resolve方法中会去改变promise的状态,并且得到这个值,那么代码貌似应该这样写:

</>复制代码

  1. function Promise(fn) {
  2. var state = "pending";
  3. function resolve(newValue) {
  4. state = "resolved";
  5. callback(newValue);
  6. }
  7. this.then = function(onResolved) {
  8. callback = onResolved;
  9. };
  10. fn(resolve);
  11. }

这里我们先把setTimeout这家伙给干掉了,因为我们加入了状态,也就意味我们是想通过状态的变化来知道能不能得到值,那么问题来了,我们不知道状态啥时候变,就像你不知道你要泡的妞啥时候答应你一样,你只能追问,万一妞没想好,她很可能再给你一个承诺,就是那个该死的XXX时候再告诉你,不过好歹她也算给了你一个等待的机会,而我们现在要做的就是创造这么个机会。

</>复制代码

  1. function Promise(fn) {
  2. var state = "pending";
  3. var value;
  4. var deferred;
  5. function resolve(newValue) {
  6. value = newValue;
  7. state = "resolved";
  8. if(deferred) {
  9. handle(deferred);
  10. }
  11. }
  12. function handle(onResolved) {
  13. if(state === "pending") {
  14. deferred = onResolved;
  15. return;
  16. }
  17. onResolved(value);
  18. }
  19. this.then = function(onResolved) {
  20. handle(onResolved);
  21. };
  22. fn(resolve);
  23. }

这里引入了另外一个函数handle,至此可以说promise的最关键的东西我们已经看到了,妞的身材逐渐显现。又扯远了•••••
仔细看下除了handle我们还引入两个变量value和deferred,先从最简单的来:
value的作用很简单,在构造函数内它是一个全局变量,起到一个桥梁作用,就是为了在handle函数内能取到newValue的值,而newValue就是fn函数里的那个结果。
handle我们估且可以认为它是妞的一个管家,它会去替我们询问妞有没有想好,也就是去判断当前这个承诺的状态,再决定怎么做。
deferred我们估且可以这样理解,它就是管家的一个记事本,你隔三差五的去问,它老人家不得记下来,如果一不小心忘了,那就悲催了。
这下不管是同步还是异步,我们随时可以在then方法中去取值,如果值没有被resolve,也就是说状态没发生变化,deferred将给我们记录下这件事,等到resolve的那个时间点把值传给then方法中那个回调函数,onResolved。
在这里请默念一百遍handle,defer,再接着往下看,我保证他们会让你困惑。
5、回到最初,为什么要用promise,想想回调地狱,再想想promise是怎么解决的,那就是then方法链式调用。
能够实现链式调用,也就是说then方法返回的值也一定是个promise,这样你才能.then,.then的一直写下去。废话不说,没代码说个毛:

</>复制代码

  1. function Promise(fn) {
  2. var state = "pending";
  3. var value;
  4. var deferred = null;
  5. function resolve(newValue) {
  6. value = newValue;
  7. state = "resolved";
  8. if(deferred) {
  9. handle(deferred);
  10. }
  11. }
  12. function handle(handler) {
  13. if(state === "pending") {
  14. deferred = handler;
  15. return;
  16. }
  17. if(!handler.onResolved) {
  18. handler.resolve(value);
  19. return;
  20. }
  21. var ret = handler.onResolved(value);
  22. handler.resolve(ret);
  23. }
  24. this.then = function(onResolved) {
  25. return new Promise(function(resolve) {
  26. handle({
  27. onResolved: onResolved,
  28. resolve: resolve
  29. });
  30. });
  31. };
  32. fn(resolve);
  33. }

这下换个姿势,我们先啃硬货。我们让then方法返回了一个promise,而且这个promise实例化时传入的函数里调用了handle函数,传入了一个对象,onResolved很显然就是then方法里第一个函数,没什么可说的。关键是这handle和resolve是哪个?思考1分钟。
这里我们用setTimeout简单模拟一个异步,拿一个then看下,发生了什么:

</>复制代码

  1. var promise = new Promise(function(resolve){
  2. setTimeout(function(){
  3. resolve(1);
  4. },3000)
  5. });
  6. promise.then(function(res){
  7. console.log(res);
  8. })

首先我们去new一个promise,在实例化的过程中,调用了传进的那个函数,3秒后才能执行到resolve,紧接着调用了它的then方法,这个时候由于promise的状态没变,肯定取不到值,好在then方法会返回个promise,于是又执行了一次promise的实例化过程。这里无法回避的就是作用域的问题,这个关系到handle函数执行在哪个环境中,参数的到底从哪个地方获取到,另外就是强大的闭包。相关知识不解释。
为了看的更清楚,我们加入一些标记,到chrome的控制台中调试下:

</>复制代码

  1. var count = 0;
  2. function Promise(fn) {
  3. var state = "pending";
  4. var value;
  5. var deferred = null;
  6. var scope = ++count;
  7. function resolve(newValue) {
  8. value = newValue;
  9. state = "resolved";
  10. console.log("resolve: I am in " +scope);
  11. if(deferred) {
  12. handle(deferred);
  13. }
  14. }
  15. function handle(handler) {
  16. console.log("handle: I am in " +scope);
  17. if(state === "pending") {
  18. deferred = handler;
  19. return;
  20. }
  21. if(!handler.onResolved) {
  22. handler.resolve(value);
  23. return;
  24. }
  25. var ret = handler.onResolved(value);
  26. handler.resolve(ret);
  27. }
  28. this.then = function(onResolved) {
  29. console.log("then: I am in " + scope);
  30. return new Promise(function(resolve) {
  31. console.log("then promise: I am in " + scope);
  32. handle({
  33. onResolved: onResolved,
  34. resolve: resolve
  35. });
  36. });
  37. };
  38. fn(resolve);
  39. }
  40. var promise = new Promise(function(resolve){
  41. setTimeout(function(){
  42. resolve(1);
  43. },3000)
  44. });
  45. promise.then(function(res){
  46. console.log(res);
  47. });

加入的scope是为了监视作用域的变化,以间接反应出我们调用handle时是在哪个作用域上查询到的,此外我们还需要监视state和deferred的变化。
主要看then调用之后,废话不说上图:
5-1、在执行then方法的时候,scope=1,state,deferred不可用。由于模拟了异步,这个时候第一个promise的resolve方法并没有执行,这里模拟了3秒,实际情况下,比如ajax取数据时,我们并不知道这个准确的时间,就像开始时说的,这妞啥时候答应你,主动权不在你手中,由妞说了算。

5-2、接下来去实例化then方法创建的这个promise,scope = 2,state=”pending”,deferred=null。

5-3、在实例化完成之后,此时去执行fn函数,scope=1,state,deferred不可用。

第一,函数的作用域是在定义时就生成的,而不是在调用的时候。第二个promise定义的时候,是在第一个promise作用域上,这样即使它被return了出去,由于闭包的特性,仍读取的是第一个作用域上值,所以这里的handle必定是第一个promise的handle。而resolve则不同,它是作为行参传递了进来,所以这里的resolve是第二个promise的resolve。
5-4、进入handle时,scope = 1,state =” pending”,deferred保存了参数。

5-5、3秒时间到,第一个promise里的resolve被执行了,也就是说拿到了结果,这时候,scope=1,state = “resolved”,deferred保存着刚才传进来的那个对象,再次进入handle函数。

5-6、scope=1,state = “resolved”,deferred求值为true,因此肯定会继续执行。下面添加的这段代码在这里也就很清楚了,假如then方法中没有传进来的onResolved函数,这里的value将直接交给下一个then方法中的onResolved函数使用,避免一些无聊的人像这样去调用:

</>复制代码

  1. promise.then().then().then(function(res){
  2. console.log(res);
  3. })

正常人都会让value在onResolved函数中接收到,然后ret就是onResolved函数的返回值,这里没有return回的值,所以ret肯定是undefined。

5-7、scope=2,state = “resolved”,deferred=null。这里的resolve是第个promise的resolve,所以定义的时候就是在作用域2上,如果后面再调用then方法,生成新的promise,这时就会将undefined作为第二个promise的值传递下去。

这里再次强调一下,handle方法和deferred是核心所在,其背后的精髓无非还是作用域和闭包的巧妙设计。变量的读取必定先从自身所处作用域开始,如果自身作用域上读不到,才会一级一级向上访问。
6、意淫到这里基本上核心的东西就差不多了,下面我们来加上reject时的情况,直接上代码:

</>复制代码

  1. function Promise(fn) {
  2. var state = "pending";
  3. var value;
  4. var deferred;
  5. this.then = function (onResolved, onRejected) {
  6. return new Promise(function (resolve, reject) {
  7. handle({
  8. onResolved: onResolved,
  9. onRejected: onRejected,
  10. resolve: resolve,
  11. reject: reject
  12. });
  13. });
  14. };
  15. function resolve(newValue) {
  16. if (newValue && typeof newValue.then === "function") {
  17. newValue.then(resolve);
  18. return;
  19. }
  20. state = "resolved";
  21. value = newValue;
  22. if (deferred) {
  23. handle(deferred);
  24. }
  25. }
  26. function reject(reason) {
  27. state = "rejected";
  28. value = reason;
  29. if (deferred) {
  30. handle(deferred);
  31. }
  32. }
  33. function handle(handler) {
  34. if (state === "pending") {
  35. deferred = handler;
  36. return;
  37. }
  38. var handlerCallback;
  39. if (state === "resolved") {
  40. handlerCallback = handler.onResolved;
  41. } else {
  42. handlerCallback = handler.onRejected;
  43. }
  44. if (!handlerCallback) {
  45. if (state === "resolved") {
  46. handler.resolve(value);
  47. } else {
  48. handler.reject(value);
  49. }
  50. return;
  51. }
  52. var ret;
  53. try {
  54. ret = handlerCallback(value);
  55. } catch (e) {
  56. handler.reject(e);
  57. return;
  58. }
  59. handler.resolve(ret);
  60. }
  61. fn(resolve);
  62. }

情况基本和resolve是一样的,resolve函数中加的if判断只为了对付返回值是promise的情况下仍然可以通过后续的then方法取到值,handle中的try/catch块的加入使得可以捕获到promise及then方法回调中的错误,至于then方法的改变,看不懂的话自宫吧,你是女人当我没说。

四、其它

当然这个promise只是一个基本的实现,依然很脆弱,但基本上可以说有了一轮廓,剩下的部位各位看官自己添加,比如promise的all ,race,catch等。某种意义上说,它们也只是then方法的语法糖。
http://www.mattgreer.org/arti...,本文代码出处,算是学习后的一点体会,水平有限,理解不对之处,还请指正。

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

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

相关文章

  • JavaScript 异步

    摘要:从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归 问题描述 在开发过程中,遇到一个需求:在系统初始化时通过http获取一个第三方服务器端的列表,第三方服务器提供了一个接口,可通过...

    tuniutech 评论0 收藏0
  • es6 promise源码实现

    摘要:执行的时候呢即可如何处理链式的且保证顺序每个后面链一个对象该对象包含子三个属性当父状态改变完毕执行完相应的的时候呢,拿到子在等待这个子状态改变,在执行相应的。 promise源码分析 初级入门以及如何使用请看 阮一峰promise对象讲解 先上一坨代码,后面我们要基于这坨代码来实现自定义promise 原始方法 setTimeout(function(){ var a=100...

    未东兴 评论0 收藏0
  • ES6-7

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

    mudiyouyou 评论0 收藏0
  • 高级前端面试题大汇总(只有试题,没有答案)

    摘要:面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。 面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。有些面试题会重复。 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理 如何和MySQL进行通信 React声明周期及自己的理解 如何...

    kviccn 评论0 收藏0
  • ES6 异步编程之二:Promise

    摘要:今天对于处理异步调用已经有了很多成熟的方案,在我看来这些方案都无外乎在解决一个问题如何能看似顺序地传递异步调用的结果,本文要说的就是原生提供的一个解决方案。在对进行叙述之前,依旧引用阮大的入门一书中的章节便于大家更严谨和全面的学习和参考。 异步回调的泥潭 异步回调是最直接的异步结果处理模式,将一个回调函数callback扔进异步处理函数中,当异步处理获得结果之后再调用这个回调函数就可以...

    Gilbertat 评论0 收藏0

发表评论

0条评论

sushi

|高级讲师

TA的文章

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