前端杂谈: 如何实现一个 Promise?

  • 时间:
  • 浏览:1

按照 Promise 的规范定义, 理想中 Promise 的调用法子为:

邮箱: ssthouse@163.com

为此大伙 加入另八个 工具法子 makeThenable()。肯能传入的 value 三种也有 then()法子,则直接返回 value。怎么让 返回另八个 有 then()法子的对象。

在该对象的 then()法子中,大伙 根据 promise 的状态,调用不同的回调法子生成新的 value。

大伙 为 promise 加入 value 字段,用于保存 Promise 的执行结果。

为了实现规范中对于 Promise 状态变化的要求, 大伙 需用为 Promise 加入状态管理, 什儿 步较为简单, 让大伙 看代码:

这里有另八个 什么的什么的问题 ,大伙 在调用 ownPromise()后得到了 promise 实例,此时大伙 需用直接调用 fulfill()reject()这另八个 法子,而理论上大伙 应该只应暴露 promise 的then()法子。怎么让 大伙 利用闭包将这另八个 法子隐藏:

有了以上的 makeThenable()法子,大伙 需用在 promise 的fulfill()reject()回将 value 设置为 thenable:

A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.

当前大伙 的实现 Promise 中,异步逻辑代码和 Promise 的代码是杂糅在共同的,让大伙 将其区分开:

github 主页

ssthouse-blog

这里是我的 前端、_D3.js_ 、 数据可视化 的 github 地址, 欢迎 star & fork :tada:

这里大伙 只对异步调用fulfill 回调中抛出的 error 进行处里。

https://github.com/kriskowal/q/blob/master/design/README.md

对于 Promise 使用以及error handle 的讲解:

最后让大伙 对详细的代码进行测试:

怎么让 是 fulfill 中肯能出先的异常。大伙 对fulfillCallback(value)肯能出先的异常进行捕获,并将异常传递给rejectCallback

为了支持链式调用,.then() 法子的返回值需用是用 thenable (根据 Promise/A+ 规范, .then() 法子的返回值需怎么让 另八个 的 Promise)

Promise 实现库之一: Q 对于 Promise 实现的讲解:

掘金

这麼,大伙 变得到了另八个 需用链式调用的 promise。让大伙 来测试一下:

以上怎么让 大伙 对于 Promise 的另八个 简单的实现,实现思路主要参考了 Q-A promise library for javascript。该实现的 Promise 功能较为简陋,仅实现了帕累托图 api/规范。有任何意见和建议欢迎在评论区交流 ;)

首先, 让大伙 看看一段最普通的异步代码:

怎么让 大伙 需用在 then()法子中对其状态进行判断:

知乎专栏

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261

按照什儿 理想当中的调用法子, 让大伙 写出第一版代码.

这段代码中大伙 用到了 Symbol 来表示状态常量, 对 Symbol 不了解的同学需用看这里

接下来让大伙 看 then()法子。为了返回另八个 新的 promise,大伙 首先得创建另八个 新的 promise。其次当前 promise 在fulfill()reject()时,应该调用新的 promise 的fullfill()reject()法子。怎么让 大伙 在将 fulfullCallbackrejectCallback赋值给当前 promise 时,将其包装一下。代码如下:

怎么让 大伙 的 Promise 有另八个 什么的什么的问题 : promise 的值这麼被保存下来。肯能 promise 在异步调用完成完后 才被调用 .then() 法子,则大伙 无法把异步调用的结果传递给回调函数。为此大伙 需用为 Promise 加另八个 value 字段:

为了判断 Promise 的状态, 大伙 加入了 fulfillreject 另八个 法子。并在其中判断 promise 当前状态。肯能也有 pending 状态则直接 return(肯能 Promise 状态只肯能改变一次)。

现在大伙 的 promise 实现了对状态控制的规范:

关键得话: Promise 是另八个 在将来某个时刻产生另八个 单一结果的对象.

通俗怎么让 来说, Promise 代表了另八个 值, 怎么让 什儿 值大伙 不让说选取哪几个完后 会被返回.

这里大伙 又发现另八个 什么的什么的问题 ,肯能另八个 Promise 肯能是fulfillreject状态。大伙 再调用 then() 法子时,传入的回调法子永远不让被调用(肯能 status 肯能也有 pending)。

A promise is an object that may produce a single value some time in the future.

大伙 的思路是在 .then() 法子中, 将 fullfill 和 reject 结果的回调函数保存下来, 怎么让 在异步法子中调用. 肯能是异步调用, 根据 event-loop 的原理, promiseAsyncFunc().then(fulfillCallback, rejectCallback) 传入的 callback 在异步调用结束时一定是肯能赋值过了.

首先是异步调用帕累托图,大伙 将其 try catch 起来,在指在异常时调用 reject 法子,并将异常作为参数传入。

大伙 新定义了另八个 法子 ownPromise() 用于创建 Promise,并在promiseAsyncFunc() 中暴露出 fulfillreject 接口方便异步代码去调用。