手撕promise--promise的底层实现＜究极详细＞

已于 2022-10-10 18:33:25 修改
阅读量965 收藏 4
点赞数 3
分类专栏： 前端 # JavaScript 文章标签： javascript 前端
于 2022-05-08 20:06:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47234456/article/details/124653545
版权

Promise 异步 链式调用 状态管理 异常处理
关键词由CSDN通过智能技术生成

文章目录

手撕promise

promise有三种状态

请添加图片描述

创建初始结构
// 初始结构
class Commitment {
  static PENDING='待定';static FULFILLED='成功';static REJECT='拒绝';
  constructor(func){
    // status状态
    this.status = Commitment.PENDING
    // result对应状态的结果
    this.result = null
    func(this.resolve,this.reject)
  }
  // 因为resolve和reject也是方法
  resolve(result){
    if(this.status === Commitment.PENDING){
      this.status = Commitment.FULFILLED
      this.result = result
    }
  }
  reject(result){
    if(this.status === Commitment.PENDING){
      this.status = Commitment.REJECT
      this.result = result
    }
  }
}

let commitment = new Commitment(resolve=>{
  resolve('123')
})

写到这里直接new一个Commitment实例，结果会报错

请添加图片描述

为什么找不到status呢，因为constructor里面的this指向的是promise实例，而constructor外面指向的是其构造函数的原型对象

因此要修改this指向

修改this指向
class Commitment {
  static PENDING='待定';static FULFILLED='成功';static REJECT='拒绝';
  constructor(func){
    // status状态
    this.status = Commitment.PENDING
    // result对应状态的结果
    this.result = null
      // 在这里为resolve和reject函数修改this指向
    func(this.resolve.bind(this),this.reject.bind(this))
  }
接下来实现.then
class Commitment {
  then(onFULFILLED,onREJECT){
    if(this.status === Commitment.FULFILLED){
      onFULFILLED(this.result)
    }
    if(this.status === Commitment.REJECT){
      onREJECT(this.result)
    }
  }
}
解决异常
异常一
// 原生promise
let promise = new Promise((resolve,reject)=>{
    throw new Error('promise错误')
})
promise.then(
  result=>{console.log(result)},
  result=>{console.log(result.message)}// promise错误
)

在原生promise中，如果promise自己报错，then的第二个函数能接收到，因此我们要用try…catch捕获

class Commitment {
  static PENDING='待定';static FULFILLED='成功';static REJECT='拒绝';
  constructor(func){
    // status状态
    this.status = Commitment.PENDING
    // result对应状态的结果
    this.result = null
    try{
      func(this.resolve.bind(this),this.reject.bind(this))
    } catch(error){
      this.reject(error)
    }
  }
}
异常二
// 原生promise
let promise = new Promise((resolve,reject)=>{
    resolve('成功')
    reject('失败')
})
promise.then(
  undefined,
  result=>{console.log(result.message)}
)
// 不会报错

在原生promise中，.then里的两个参数如果不为函数，也不会报错；但是我们的手写代码会报错，因此要加异步判断

class Commitment {
  then(onFULFILLED,onREJECT){
    // 如果参数是一个函数，就把自己赋值给自己（不变），如果不是函数，则赋一个空函数
    onFULFILLED = typeof onFULFILLED === 'function' ? onFULFILLED : ()=>{}
    onREJECT = typeof onREJECT === 'function' ? onREJECT : ()=>{}
    if(this.status === Commitment.FULFILLED){
      onFULFILLED(this.result)
    }
    if(this.status === Commitment.REJECT){
      onREJECT(this.result)
    }
  }
}
实现异步

要实现异步，先套上setTimeout

  then(onFULFILLED,onREJECT){
    // 如果参数是一个函数，就把自己赋值给自己（不变），如果不是函数，则赋一个空函数
    onFULFILLED = typeof onFULFILLED === 'function' ? onFULFILLED : ()=>{}
    onREJECT = typeof onREJECT === 'function' ? onREJECT : ()=>{}
    if(this.status === Commitment.FULFILLED){
      setTimeout(()=>{
        onFULFILLED(this.result)
      })
    }
    if(this.status === Commitment.REJECT){
      setTimeout(()=>{
        onREJECT(this.result)
      })
    }
  }

之后会有一个问题

在说这个问题前，要先了解什么是宏任务和微任务

宏任务包括：

  • script整体代码

  • 异步ajax请求

  • setTimeout、setInterval

  • 文件操作

  • 其他

微任务包括：

  • Promise.then .catch .finally（注意是Promise的这三个方法，Promise实例本身还是属于同步任务的）
  • process.nextTick
  • 其他

因为script本身就是一个宏任务，所以事件循环本质上是从宏任务开始的，先执行宏任务里的微任务，再执行宏任务，再执行另一个宏任务，依次反复。当然同步任务是最先执行。

// 原生promise
console.log('1')

let promise = new Promise((resolve,reject)=>{
	console.log('2')
	setTimeout(()=>{
		resolve('5')
		console.log('4')
	})
})
promise.then(
	result =>{console.log(result)}
)
console.log('3')

// 输出结果为12345

但是按照刚刚讲的，同步任务执行完输出123之后，应该先执行微任务.then，此时resolve(‘5’)还为执行，所以应该没有输出，之后再执行宏任务setTimeout输出4

结果应为1234

说明了，原生promise对于这里进行了处理

实现方法：

因为执行then之前没有执行resolve，导致then当时的状态为PENDING待定状态，所以我们加一步判断，判断当前状态为待定时，让then稍后再执行，执行完了resolve再执行then

具体的实现为，创建this.resolveCallbacks=[]保存resolve的执行结果
创建this.rejectCallbacks=[]保存reject的执行结果
在then里，判断当前状态为待定时，将对应的函数onFULFILLED,onREJECT都push到对应数组中
之后在resolve和reject里遍历数组

这里还有一个坑，resolve和reject在事件循环末尾执行，所以要在resolve和reject里加上setTimeout

实现代码

class Commitment {
  static PENDING='待定';static FULFILLED='成功';static REJECT='拒绝';
  constructor(func){
    // status状态
    this.status = Commitment.PENDING
    // result对应状态的结果
    this.result = null
    // 保存resolve函数
    this.resolveCallbacks=[]
    // 保存reject函数
    this.rejectCallbacks=[]
    try{
      func(this.resolve.bind(this),this.reject.bind(this))
    } catch(error){
      this.reject(error)
    }
  }
  // 因为resolve和reject也是方法
  resolve(result){
    setTimeout(()=>{
      if(this.status === Commitment.PENDING){
        this.status = Commitment.FULFILLED
        this.result = result
        this.resolveCallbacks.forEach(
          callback=>{
            callback(result)
          }
        )
      }
    })
  }
  reject(result){
    setTimeout(()=>{
      if(this.status === Commitment.PENDING){
        this.status = Commitment.REJECT
        this.result = result
        this.rejectCallbacks.forEach(
          callback=>{
            callback(result)
          }
        )
      }
    })
  }
  then(onFULFILLED,onREJECT){
    // 如果参数是一个函数，就把自己赋值给自己（不变），如果不是函数，则赋一个空函数
    onFULFILLED = typeof onFULFILLED === 'function' ? onFULFILLED : ()=>{}
    onREJECT = typeof onREJECT === 'function' ? onREJECT : ()=>{}
    // 这一步判断PENDING状态是为了实现异步
    if(this.status === Commitment.PENDING ){
      this.resolveCallbacks.push(onFULFILLED)
      this.resolveCallbacks.push(onREJECT)
    }
    if(this.status === Commitment.FULFILLED){
      setTimeout(()=>{
        onFULFILLED(this.result)
      })
    }
    if(this.status === Commitment.REJECT){
      setTimeout(()=>{
        onREJECT(this.result)
      })
    }
  }
}

带大家理一下顺序

let promise = new Promise((resolve,reject)=>{
	console.log('2')
	setTimeout(()=>{
		resolve('5')
		console.log('4')
	})
})
promise.then(
	result =>{console.log(result)}
)

/*
**new一个实例输出2，运行遇到setTimeout异步先不执行，到then方法
**then里面发现现在的状态是待定，就把函数参数push到对应数组
**现在开始执行setTimeout里面的内容，先执行resolve
**发现resolve函数上来就是一个setTimeout异步，只能出来先执行console.log('4')，输出4
**最后执行在消息队列中的resolve函数
*/
实现链式

把then中的功能返回一个新的promise就可以了

  then(onFULFILLED,onREJECT){
    return new Commitment((resolve,reject)=>{
      // 如果参数是一个函数，就把自己赋值给自己（不变），如果不是函数，则赋一个空函数
      onFULFILLED = typeof onFULFILLED === 'function' ? onFULFILLED : ()=>{}
      onREJECT = typeof onREJECT === 'function' ? onREJECT : ()=>{}
      // 这一步判断PENDING状态是为了实现异步
      if(this.status === Commitment.PENDING ){
        this.resolveCallbacks.push(onFULFILLED)
        this.resolveCallbacks.push(onREJECT)
      }
      if(this.status === Commitment.FULFILLED){
        setTimeout(()=>{
          onFULFILLED(this.result)
        })
      }
      if(this.status === Commitment.REJECT){
        setTimeout(()=>{
          onREJECT(this.result)
        })
      }
    })
  }
最终代码
class Commitment {
  static PENDING='待定';static FULFILLED='成功';static REJECT='拒绝';
  constructor(func){
    // status状态
    this.status = Commitment.PENDING
    // result对应状态的结果
    this.result = null
    // 保存resolve函数
    this.resolveCallbacks=[]
    // 保存reject函数
    this.rejectCallbacks=[]
    try{
      func(this.resolve.bind(this),this.reject.bind(this))
    } catch(error){
      this.reject(error)
    }
  }
  // 因为resolve和reject也是方法
  resolve(result){
    setTimeout(()=>{
      if(this.status === Commitment.PENDING){
        this.status = Commitment.FULFILLED
        this.result = result
        this.resolveCallbacks.forEach(
          callback=>{
            callback(result)
          }
        )
      }
    })
  }
  reject(result){
    setTimeout(()=>{
      if(this.status === Commitment.PENDING){
        this.status = Commitment.REJECT
        this.result = result
        this.rejectCallbacks.forEach(
          callback=>{
            callback(result)
          }
        )
      }
    })
  }
  then(onFULFILLED,onREJECT){
    return new Commitment((resolve,reject)=>{
      // 如果参数是一个函数，就把自己赋值给自己（不变），如果不是函数，则赋一个空函数
      onFULFILLED = typeof onFULFILLED === 'function' ? onFULFILLED : ()=>{}
      onREJECT = typeof onREJECT === 'function' ? onREJECT : ()=>{}
      // 这一步判断PENDING状态是为了实现异步
      if(this.status === Commitment.PENDING ){
        this.resolveCallbacks.push(onFULFILLED)
        this.resolveCallbacks.push(onREJECT)
      }
      if(this.status === Commitment.FULFILLED){
        setTimeout(()=>{
          onFULFILLED(this.result)
        })
      }
      if(this.status === Commitment.REJECT){
        setTimeout(()=>{
          onREJECT(this.result)
        })
      }
    })
  }
}
会飞的战斗鸡
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
手写Promise 理解promise底层原理
Niall_Tonshall的博客
01-18 2444
本文参考了此博客，在网上浏览了很多关于Promise的相关资料，promise可以说是JavaScript的重难点了，其中，很是感谢阮一峰老师的博客讲解以及MDN上的文档教程 如对Promise不太熟悉的同学，可以先浏览Promise工作原理分析，如有不同意见，欢迎讨论，一起进步。 Promise基本流程 function doSomething(){ var p1 = new Promise(function (resolve, reject) { setTimeout(()=.
手撕promise
qq_41471157的博客
09-30 227
Proxy vue3.0应用该特性替代Object.defineproperty 解决的痛点： 监听不到属性的添加和删除 监听数组索引和长度的变更 不能支持Map，Set，WeakMap和WeakSet Promise A+规范 要求 promise状态：Pending,Fulfilled and Rejected Pending=>Fulfilled or Rejected Fulfilled必须有一个不可改变的值，且不可再转换状态 Rejected必须有一个不可改变的原因，且不可再转换状态
async await对比promise的优缺点
weixin_43496606的博客
06-25 1633
async await对比promise的优缺点 async/await优点： a. 它做到了真正的串行的同步写法，代码阅读相对容易 b. 对于条件语句和其他流程语句比较友好，可以直接写到判断条件里面 c. 处理复杂流程时，在代码清晰度方面有优势 async/await缺点： a. 无法处理promise返回的reject对象，要借助try…catch… b. 用 await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。
Promise详解：手写Promise底层-实现Promise所有的功能和方法
weixin_43909743的博客
10-22 328
手写一个TestPromise，实现以下promise所有的功能和方法, 更好的理解promise底层逻辑。
Promise的底层详解、应用及扩展
wendyGao_Yin的博客
09-14 1259
PROMISE 的 MDN介绍 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises Promise Promise 是ES6 新增加的内置类：承若模式，主要用来规划异步编程的。 Promise 是一个对象，它代表了一个异步操作的最终完成或者失败。 在本轮 事件循环 运行完成之前，回调函数是不会被调用的。 即使异步操作已经完成（成功或失败），在这之后通过 then() 添加的回调函数也会被调用。 通.
javascript Promise 一些底层实现
weixiaoderensheng的博客
11-04 1339
Promise.all  定义：当Promise 结果都为resolve 返回resolve的数组集，当一个为reject，将第一个遇到的reject返回。 const p1 = Promise.resolve('ok1') const p2 = Promise.reject('no2') const p3 = Promise.resolve('ok3') const p4 = Promis...
手撕K-means聚类算法
weixin_46336091的博客
04-01 2287
一.数据集来源 本博客采用的数据集来源于uci公开数据集（wine数据） http://archive.ics.uci.edu/ml/datasets/Wine 数据集属性： 1）酒精 2）苹果酸 3）灰分 4）灰分的藻盐度 5）镁 6）总酚 7）黄烷类化合物 8）非黄烷类酚 9）原花青素 10）颜色强度 11）色相 12）稀释葡萄酒的OD280 / OD315 13）脯氨酸 二.数据读取 从网站上下载的源文件格式是.data，我不...
手撕GO语言-详细注释版
最新发布
12-15
【标题】"手撕GO语言-详细注释版"提供了全面深入学习Go语言的资源，适合初学者和有一定经验的开发者。这份资料包含了大量实例，旨在帮助读者快速掌握Go语言的核心概念和应用。 【描述】"学习GO语言的不二资料"表明...
04手撕promise.js
06-11
04手撕promise.js
Promise：工作流程、常见API、使用方法、手撕Promise、async/await
weixin_42044763的博客
12-28 2572
Promise指定回调函数的方式更加灵活，且支持链式调用，可以解决回调地狱的问题。回调地狱：回调函数嵌套调用，外部回调执行结果是内部函数执行的条件，不便于阅读且不便于异常处理，解决方式就是promise（或async/await）
javascript Promise 底层实现
y_w_x_k的博客
09-17 172
class Promise{ constructor(executor){ this.PromiseState="pending" this.PromiseResult=null this.callbacks=[] let self=this //resolve function resolve(data){ //判断状态 if(self.Promis.
Promise实现原理（附源码）
octopus的专栏
09-17 633
本篇文章主要在于探究 Promise 的实现原理，带领大家一步一步实现一个 Promise , 不对其用法做说明，如果读者还对Promise的用法不了解，可以查看阮一峰老师的ES6 Promise教程。   接下来，带你一步一步实现一个 Promise   1. Promise 基本结构     new Promise((resolve, reject) => {   set...
手撕代码之Promise的实现（附源码）
qq_43238599的博客
01-11 473
ES6已经普及很多年了，我们早已过去了callback时代。公司要求也不再是停留在promise的使用上了。所以本文带大家一起从零开始写自己的 Promise,剖析其内在原理。 1、promise 基本结构 1.1 状态 我们都知道promise 有三种状态 Pending Resolved Rejected 并且promise 的状态是不可逆的 1.2 参数 每一个 Promise 都有两个 函数参数，分别是 resolved 成功状态 rejected 失败状态 1.3 方法 通过查看 P.
手撕 Promise（then 链及 Promise 方法实现）
雪急飞绪博客
02-24 581
Promise 了解 Promise Promise 是一个异步操作返回的对象，用来传递异步操作的消息 可以解决的问题 解决回调地狱问题，不会导致难以维护 合并多个异步请求，节约时间 Promise 的三种状态 Pending 等待态 Fulfilled 成功态 Rejected 失败态 使用 Promise Promise.resolve：将现有对象转为 Promise 对象，这个对象处于 resolve 状态 作用： 改状态 发布事件池子里的方法 Promise.resolve([1, 2
Promise实现原理
weixin_34183910的博客
03-02 100
Promise 是 es6 引入的异步处理方案，让我们可以采用链式的写法注册回调函数，摆脱多层异步回调函数嵌套的情况，使代码更加简洁。而理解 Promise 内部实现原理也十分重要，我们可以从简单的模型开始，考虑不同的边界情况，一步一步的往最终结果实现。 一个简单的雏形 如下我们可以新建一个 Promise对象, 然后马上执行成功的回调。 var a = new Promise(function...
promise的内部实现
ccc的博客
04-13 206
代码：代码浅显易懂，用来提醒自己。路过的可以看看，底部附上大佬代码出处。 const PENDING = 'pending'; //初始状态 const FULFILLED = 'fulfilled'; // 成功状态 const REJECTED = 'rejected'; // 成功 function Promise(extutor){ let self = this; self.st...
Promise 由基本使用到底层逻辑
cgh508802602的博客
09-15 242
Promise
教你一步一步手撕Promise
老司机的后备箱
09-13 331
手写一个Promise已经是一个常见的手写功能了，虽然实际工作上可能并不会用到。但是在面试时还是会经常被提起的。
高级前端修炼之路：一步步教你手写Promise底层源码
前端工程师
11-20 984
在之前的《高级前端修炼之路：深入理解JQuery底层源码》的文章中，我已经详细介绍了Jquery中的Deferred延迟对象的用法并模拟了它的一些底层源码的实现。今天要介绍的，是ES6中一个和JQ延迟对象非常相似的对象——Promise。 JQ中Deferred对象的决议结果有三种可能：resolve、reject和notify，分别代表成功、失败和等待状态。而Pro...
手撕buck-boost
08-04
手撕buck-boost电路是一种常见的升降压电路，用于将输入电压转换为较高或较低的输出电压。...总结来说，手撕buck-boost电路是一种用于升降压的电路，通过控制开关的导通和断开，实现输入电压到输出电压的转换。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会飞的战斗鸡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值