promise 获取数据(自己造轮子超详细)

promise 获取数据(自己造轮子超详细)(1)

promise 获取数据(自己造轮子超详细)(2)

“我最近学习了Promise对象的使用,真是太棒了,使用链式调用代替了嵌套回调,代码书写起来很方便还便于阅读” 小白说。

麦克黑:“是的,Promise是一种异步编程解决方案,尤其在多接口调用的时候会起到非常大的作用,方便开发” 。

小白挠挠头说:“我阅读了代码知道了他的使用方式,我知道他有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败),也能够在项目中熟练使用,但我并不知道Promise内部的实现原理” 。

麦克黑:“如果你感兴趣,我觉的你可以尝试自己造轮子,来自己写一个Promise对象,”

小白:“如果可以的话就太棒了,但是我应该如何着手写一个自己的Promise对象呢?”

“当然可以,不过,以下谈话价值两杯咖啡外加一个鸡肉卷”麦克黑狡黠的一笑。

“OK,成交了” 小白晃了晃手里的星巴克优惠券。

今天我们来写一个Promise对象

一。在这之前要确保你完全明白如何使用他的各个方法。如果还不清楚那么就去看下es6的文档,不然下面的内容可能会看不明白

二。你完全了解发布/订阅模式,这会然让你对后面的代码更容易理解,如果还不清楚就去看下我们上次的谈话 《教你如何用ES6发布/订阅模式约女朋友》”

“那么首先你来写一个最常用的Promise的使用方法”老麦克说到

“没问题”

promise 获取数据(自己造轮子超详细)(3)

“写的不错,那么我们就编写一段代码让这段代码能够正常的运行”。

首先我们编写一个Promise方法

promise 获取数据(自己造轮子超详细)(4)

在Promise方法里我定义了 两个数组 分别用来存放 成功时和失败时要执行的函数,你还记得发布订阅者模式吗?

this.status 用来存放执行状态。 this.value存放 返回的内容(不管成功与否)

接下来我们执行了 startResolve(this, fn); 方法。但现在我还不准备讲解他的实现方式。

我们先实现then方法

promise 获取数据(自己造轮子超详细)(5)

当我们调用then方法的时候首先会判断this.status的状态

  • this.status =0 则 执行 addQueue
  • this.status =1 则 执行 reject
  • this.status =2 则 执行 reject

那么我们首先看下addQueue方法。

addQueue方法的实现

promise 获取数据(自己造轮子超详细)(6)

你看到了吗,开始push了,就像发布订阅模式一样。

resolve方法的实现

promise 获取数据(自己造轮子超详细)(7)

看下成功数组(resolves)里有没有函数,如果没有直接返回false ,如果有函数我们就把失败数组(rejects)的函数清除掉。修改status的状态为 1,也就是resolve 解析成功然后调用resolves 列表里的函数,也就是我们从then里的函数push进来的函数。

reject方法的实现

promise 获取数据(自己造轮子超详细)(8)

和resolve是一个道理,你懂的,不解释。

最后我们来看下startResolve都干了些什么。

startResolve() 方法的实现

promise 获取数据(自己造轮子超详细)(9)

看到了吧,延迟执行,在这里我们用setTimeout来实现延迟在实际的es6的promise对象中他使用的是 asap模块来实现的

var asap = require('asap/raw');

总结:

也就是说我们先执行了then方法,把then里的两个匿名函数push到了promise的成功函数数组(resolves)和失败函数数组里(rejects),然后在执行pormise里的函数等成功或者失败以后再调用then里提供的方法。懂了吗?

最后我们来看下完整的Promise代码实现。

promise 获取数据(自己造轮子超详细)(10)

到此我们的代码编写完毕,最开始的代码还记得吗?

promise 获取数据(自己造轮子超详细)(11)

在浏览器中运行一下来验证我们的代码是否成功!

promise 获取数据(自己造轮子超详细)(12)

“完美运行,非常棒,难怪您会先让我学习发布/订阅模式,非常感谢”小白向老麦克竖起了大拇指。

promise 获取数据(自己造轮子超详细)(13)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页