1 Star 0 Fork 0

LuoYanChong / hand_promise

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

手写Promise实现

结构搭建

解决异常 TypeError: p.then is not a function
为Promise构造函数 添加原型方法 then

执行器函数

Promise的参数传入的是 (reslove, reject) => {} 同步调用的执行器函数

Promise的两个属性值

PromiseState: 状态

  1. pending 初始值,等待状态
  2. fulfilled 成功
  3. rejected 失败

PromiseResult: 结果值

reslove函数

修改PromiseState pending -> fulfilled,修改PromiseResult结果

reject函数

修改PromiseState pending -> rejected,修改PromiseResult结果

执行器函数的异常拦截

当执行器函数执行过程中抛出异常的时候,会改变PromiseState为失败状态,抛出的异常就是失败的结果值

PromiseState状态变化

Promise状态只能修改一次,要么成功,要么失败。只要状态变化了,就不能再次修改。

正常的状态变化

  1. pending -> fulfilled
  2. pending -> rejected

then方法的同步执行

  1. then方法接收两个参数,第一个参数是成功的回调函数,第二个参数是失败的回调函数。
  2. 当执行器函数中没有异步代码时,then方法是能够获取到Promise的成功或失败状态的。此时可以根据成功或失败状态来执行对应的回调函数,回调函数的参数就是Promise的结果值。

then方法的异步执行

  1. 当执行器函数中存在异步代码时,因为then方法是同步调用的此时Promise的状态仍然为pending初始状态。
  2. 执行then方法Promise状态仍然为pending时,就无法根据成功或失败状态来执行对应的回调方法。此时保存回调方法,等异步代码执行完毕,Promise状态变化时,再执行回调方法。

then方法的多次执行

一个Promise实例可以指定多个then方法,当Promise实例对象的状态变化时如果存在多个then方法,那么所有then方法的回调都会执行。

then方法的返回结果

then方法的返回结果是一个Promise对象,Promise对象的状态和返回值受回调函数的执行结果影响。

  1. 回调函数的执行结果不是Promise对象时,then执行结果Promise的状态为成功状态,结果值就是回调函数的执行结果。
  2. 回调函数的执行结果是Promise对象时,then执行结果Promise的状态、结果值和回调函数的执行结果Promise保持一致。
  3. 回调函数执行抛出异常时,then执行结果Promise的状态为失败状态,结果值就是抛出的异常信息。

then的链式调用

因为then方法的执行结果是一个Promise对象,所以可以进行链式调用。
如 new Promise((resolve,reject)=>{}).then().then()...

then方法的值传递

then方法调用时可以不传回调参数,结果值会传递到下一个then。

catch方法

  1. then方法调用时可以不传错误回调函数,如果有错误会被catch方法捕获。
  2. catch方法就是then(undefined, onRejected)的语法糖。

Promise的值传递和异常穿透

值传递和异常穿透的原理就是如果传入的回调参数不是函数类型时会设置默认的函数进行处理。
值传递

// then方法值传递
if (typeof onResolved !== 'function') {
    onResolved = value => value
}

异常穿透

// then方法异常穿透
if (typeof onRejected !== 'function') {
    onRejected = reason => {
        throw reason
    }
}

resolve方法

resolve方法是Promise函数对象上的一个方法,返回值是一个Promise对象,状态和结果值受resolve方法参数的影响。

  1. resolve方法参数不是Promise对象时,返回值Promise的状态为成功状态,结果值就是接收的参数。
  2. resolve方法参数是Promise对象时,返回值Promise的状态、结果值和resolve方法参数的Promise对象保持一致。

reject方法

reject方法是Promise函数对象上的一个方法,返回值是一个失败状态的Promise对象,结果值就是reject方法传入的参数。

all方法

all方法是Promise函数对象上的一个方法,参数是一个Promise类型的数组,返回值Promise受数组中Promise的影响。

  1. all方法的参数数组中Promise的状态都为成功,则返回值Promise的状态为成功。结果值是一个数组,存的是all方法参数Promise类型数组中所有Promise成功的结果值。
  2. all方法的参数数组中有一个Promise的状态为失败,则返回值Promise的状态为失败,结果值就是all方法的参数数组中失败的Promise的结果值。

race方法

race方法是Promise函数对象上的一个方法,参数是一个Promise类型的数组,返回值Promise的状态、结果值与数组中最先改变状态的Promise保持一致。

任务的执行顺序

同步任务:从上到下依次执行。 异步任务:异步任务被分为两种类型。

  1. 一种是宏任务,例如:setTimeout,setInterval...等。
  2. 一种是微任务,例如:MutationObserver,Promise.then...等。 浏览器执行代码时先执行同步任务,异步任务优先执行微任务,等没有微任务之后再执行宏任务。
  3. 任务优先级 同步任务 > 微任务 > 宏任务

then方法回调函数的执行顺序

then方法回调函数的执行是异步执行的,当Promise状态变化的时候会将回调任务添加到微任务队列。

Promise封装class版

需要注意的几点

  1. executor执行器函数放到constructor构造函数中执行
  2. then、catch为实例方法,供实例对象调用
  3. resolve、reject、all、race为静态方法,class对象无需实例化即可调用,这些方法需要使用static关键字修饰

async 关键字

经过async关键字修饰过的函数,返回的是一个Promise对象,结果值、状态受return值影响。

  1. return值是非Promise对象,返回的Promise状态是成功状态,结果值就是return值。
  2. return值是Promise对象,返回的Promise状态、结果值和return值Promise保持一致。
  3. throw异常,返回的Promise是失败状态,结果值就是throw的异常。

await 关键字

await关键字用来修饰一个对象,如果修饰的是Promise对象,Promise状态在未改变之前程序会一直等待。 async函数中可以没有await,但是await必须在async修饰的函数中使用。

  1. 如果修饰的是非Promise对象,返回值是原值。
  2. 如果修饰的是成功状态的Promise对象,返回值是Promise的结果值。
  3. 如果修饰的是失败状态的Promise对象,结果值需要使用try catch进行捕获。
  4. 如果修饰的是throw异常的Promise对象,异常信息需要使用try catch进行捕获。

空文件

简介

手写Promise实现 展开 收起
JavaScript 等 2 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/one_pic/hand_promise.git
git@gitee.com:one_pic/hand_promise.git
one_pic
hand_promise
hand_promise
master

搜索帮助