当前位置:   article > 正文

方法 手写promise_手写Promise,手把手过程

手写promise

上很多手写Promise。根据自己的理解,也写了一份,晒出来希望能被大家指正。也给自己一个梳理的过程。初学者要辩证的看这个文档,你需要对原生Promise很熟悉。

代码其实非常简单,不到100行。每一步代码都是在上一步的代码基础上添加或修改得来的,在代码中会标识出哪里做了修改和增加,这样就不用翻来翻去看上一步的代码了,保证思路连贯性。进入正文:

一、Promise是个容器模拟Promise首先需要实现它的最基本的功能 - promise这个容器,用来存储异步或同步执行的结果。

- 还要有状态,来反映同步或者异步处理的阶段。有三种状态

  1. pending 异步或同步的执行阶段,这个时候结果值为undefined

  2. fulfilled,通常表示同步或者异步成功返回了结果的状态,这时候结果值记录返回的正确结果

  3. rejected,通常表示同步或者异步出现错误时的状态,这个时候结果值记录错误的原因

- 在Promise对象外部不能直接访问到Promise的状态和值

- 还需要有个执行同步或异步的函数(执行函数),以Promise参数的形式,在Promise构造函数中执行

上代码:

  1. /*'↓↓↓定义了MyPromise函数,参数executor(执行函数),数据类型是Funciotn,用来执行同步或异步操作↓↓↓'*//*'↓↓↓之所以用函数不用class,是为了方便定义对象私有变量和私有方法↓↓↓'*/function MyPromise(executor){
  2. /*'↓↓↓定义了三个状态PENDING、FULFILLED、REJECTED↓↓↓'*/ const PENDING = "pending"; const FULFILLED = "fulfilled"; const REJECTED = "rejected"; /*'↓↓↓value变量存储异步结果(Promise的值),pending状态下是undefined,fulfilled状态下是执行结果,rejected状态下是错误原因↓↓↓'*/ let value; /*'↓↓↓state变量用来存储Promise状态,初始状态是pending↓↓↓'*/ let state = PENDING; /*'↓↓↓都定义好了,再运行执行函数↓↓↓'*/ executor()}

最基本的部分完成

 二、内部操作状态和值

上面定义了容器中的状态和需要存储值的变量,而且运行了用户自己定义的执行方法,但是当执行函数有了结果,怎么改变容器的状态和存储结果呢?这就需要定义操作状态和值方法来处理。需求如下

- 值和状态只能改变一次

- 操作状态和值的方法不向外暴露,内部通过resolve方法把状态改成fulfilled,通过reject方法把状态改变成rejected,并改变状态对应的值。这两个方法作为参数传给执行函数executor,由用户决定什么时候通过这两个方法改变状态和值。

继续完善MyPromise ↓↓↓↓↓

  1. function MyPromise(executor){
  2. const PENDING = "pending"; const FULFILLED = "fulfilled"; const REJECTED = "rejected"; let value; let state = PENDING; /*'↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓这里是新加的改变状态和值的方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓'*/ function change(newState, newValue){ //'用来修改状态和相应的值的方法' if (state === PENDING) {
  3. //'限制了只能在状态pending下改变,这样就保证状态和值只能改一次' value = newState; state = newValue; } } let resolve = change.bind(this, FULFILLED);// '定义了resolve函数,只能把状态改成fulfilled' let reject = change.bind(this, REJECTED);// '定义了reject函数,只能把状态改成fulfilled' //'resolve和reject都是change的偏函数,其实绑定this没啥意义,就是写着方便,修改方便,只关注change就行了,也便于阅读代码' /*'↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑这里是新加的改变状态和值的方法↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑'*/ executor(resolve, reject)// ←←←'通过executor参数,传递到Promise外部使用'}
三、需要注册回调函数

能存储状态和值了,也能修改状态和值了,但是还需要在相应状态下处理值的方法的呢,所以就需要注册回调函数了。

Promise对象中有两个方法then和catch注册回调函数 - then有两个参数,第一个参数用来注册状态变为fulfilled时候处理返回值的回调,并且当状态改变之后,随时注册都可以处理那个已经固定了的返回值,第二个参数用来注册状态变为rejected时候处理错误原因的回调,并且当状态改变之后,随时注册都可以处理那个已经固定了的错误原因 - catch方法注册的回调等同于then的第二个函数的作用一样,其实catch就是then的语法糖,相当于then(undefined,function) - catch和then都返回一个新的Promise - 一个Promise对象可以注册很多个回调,也就是new了一个Promise可以分别点上很多then或者catch,这里说的不是链式调用呦,是分别分别分别调用then或者catch。还是举个例子吧
let p = new Promise((resolve, reject) => {})p.the
声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号