面试官让我手写promise,我这样写,他很满意 超级码力在线编程大赛初赛 第二场 UML类图的依赖和关联详解(含代码) 【C语言】新手实现简单的石头剪刀布人机对战 Codeforces Round #666 (Div. 2)题解ABC Codeforces Round #666 (Div. 2)E Monster Invaders 华为今年不会推出运行鸿蒙OS的手机;Deno 1.3.2发布|极客头条 异或在笔试题中的超神表现 超级码力在线编程大赛初赛 第2场 T1-T4题解 1397D. Stoned Game(博弈) Codeforces Round #666(Div.2)A~D题题解 高性能微服务架构技术选型 阿里饿了么Java4面:(数据结构+框架源码+JVM+分布式) 2020java面试总结 使用ffmpeg提取mp4内部日期重命名文件(需lua) 【剑指Offer】56.2 数组中只出现一次的数字,其他出现3次 JAVA二三事-使用IO+Properties实现动态读取文本信息 排序算法的C语言实现C代码(未更完) RT-Thread 内核学习--信号量的初步使用 【剑指Offer】57.2 和为S的连续正数序列 Qt三方库开发技术:QXlsx介绍、编译和使用 4G DTU模块的作用和功能说明 【Tips】- Wifi模块和4G无线通信 【5G核心网】 Identifiers 身份标识 DPDK支持的硬件:CPU、网卡NIC、加密引擎、基带加速器 如何根据普通ip地址获取当前地理位置 人工智能能力提升指导总结 520了,用32做个简单的小程序 程序员的数学--用贝叶斯定理来推断一个案子 文旅部新规:在线旅游网站不得擅自屏蔽删除评价 不得大数据杀熟 苏宁易购开学季消费大数据:手机以旧换新销量增长299% 做实供电服务“133” 助大数据直上“云”端 思科前程序员离职 5 月后“删虚拟机跑路”,240 万美元打水漂,网友:够狠! 抗疫代码成国博最新藏品 阿里程序员“写代码写进国博挺酷” 国博史上首次收藏代码!它们是阿里程序员写下的抗疫代码 威胜信息发布2020年上半年业绩:物联网产业进入爆发期 营收净利双增长 下月发布会不止有新品折叠屏手机 酷开的物联网家居生态野心初现 史上最全的数据库面试题 数据库面试必看 一个数据库SQL查询的数次轮回 百度智能云正式对外发布百度智能云数据库品牌GaiaDB 数据库三大泛式是什么 电力行业网管需求 IT运维管理解决方案 citrix桌面虚拟化中的运维工具Director SRE运维体系的构建和工作职责划分 运维的核心价值是什么 手游开发定制的全过程详解 开发人员透露:《赛博朋克2077》枪支泛滥 成熟的产品经理如何应对“这个需求不合理” CI/CD管道对开发和运维的重要性 APP开发的流程是怎样的 如何开发一个APP
您的位置:首页 >运维 >

面试官让我手写promise,我这样写,他很满意

导语:
你肯定使用过promise,但是你知道它是怎么实现的吗?它的原理是怎么样的?你能手写一个简单的promise吗?
在面试中你也可能会被问到手写一个promise,现在来直接手撕原理和代码吧!!

本文的目录

一,promise的状态二,仅仅考虑resolve和reject三,考虑能够链式then四,考虑链式,也考虑then也可能是返回一个值

一,promise的状态

promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。

一开始的时候就是pending,随后经过操作就会产生出另外两种状态fulfilled和rejected,并且可以通过这两个状态去调用不同的处理函数。

二,仅仅考虑resolve和reject

首先我们先写一个class的构造函数,并且把默认state设置为pending,它的value和reason设置为null。

class Promise{constructor(executor){this.state = "pending";//默认的状态,进行中this.value = null;//成功后携带的值this.reason = null;//失败后携带的原因this.onFulfilledCallbacks = []this.onRejectedCallbacks = []function resolve(value) {if (this.state === "pending") {this.state = "fulfilled";this.value = value;this.onFulfilledCallbacks.forEach(item => item(this.value))}};function reject(reason) {if (this.state === "pending") {this.state = "rejected";this.reason = reason;this.onRejectedCallbacks.forEach(item => item(this.reason))}};try{executor(resolve, reject);//构造} catch (err) {reject(err);}}//then函数根据state来进行后续的回调函数操作then(onFulfilled,onRejected) {if (this.state === "fulfilled") {onFulfilled(this.value);};if (this.state === "rejected") {onRejected(this.reason);};if (this.state === "pending") {this.onFulfilledCallbacks.push(onFulfilled)this.onRejectedCallbacks.push(onRejected)}}}

三,考虑能够链式then

如果要能够进行链式的then,那么肯定是要返回一个promise,才能够这样串联起来。所以我们要对刚刚的代码进行小小的修改,让then执行回调函数的时候,返回一个promise。

class Promise{constructor(executor){this.state = "pending";//默认的状态,进行中this.value = null;//成功后携带的值this.reason = null;//失败后携带的原因this.onFulfilledCallbacks = []this.onRejectedCallbacks = []function resolve(value) {if (this.state === "pending") {this.state = "fulfilled";this.value = value;this.onFulfilledCallbacks.forEach(item => item(this.value))}};function reject(reason) {if (this.state === "pending") {this.state = "rejected";this.reason = reason;this.onRejectedCallbacks.forEach(item => item(this.reason))}};try{executor(resolve, reject);//构造} catch (err) {reject(err);}}//then函数根据state来进行后续的回调函数操作then(onFulfilled,onRejected) {if (this.state === "fulfilled") {return new Promise((resolve, reject) => {onFulfilled(this.value)})};if (this.state === "rejected") {return new Promise((resolve, reject) => {onRejected(this.reason)})};if (this.state === "pending") {return new Promise((resolve, reject) => {this.onFulfilledCallbacks.push(onFulfilled)this.onRejectedCallbacks.push(onRejected)})}}}

这样写后,我们就可以进行链式操作,比如promise.then().then()…,这样无限串联,解决了回调函数的回调地狱问题。

四,考虑链式,也考虑then也可能是返回一个值

class Promise{constructor(executor){this.state = "pending";//默认的状态,进行中this.value = null;//成功后携带的值this.reason = null;//失败后携带的原因this.onFulfilledCallbacks = []this.onRejectedCallbacks = []function resolve(value) {if (this.state === "pending") {this.state = "fulfilled";this.value = value;this.onFulfilledCallbacks.forEach(item => item(this.value))}};function reject(reason) {if (this.state === "pending") {this.state = "rejected";this.reason = reason;this.onRejectedCallbacks.forEach(item => item(this.reason))}};try{executor(resolve, reject);//构造} catch (err) {reject(err);}}//then函数根据state来进行后续的回调函数操作then(onFulfilled,onRejected) {if (this.state === "fulfilled") {return new Promise((resolve, reject) => {try {let f = onFulfilled(self.value)if (f instanceof Promise) {f.then(resolve, reject)} else {resolve(f)}} catch (err) {reject(err)}})};if (this.state === "rejected") {return new Promise((resolve, reject) => {try {let j = onRejected(self.reason)if (j instanceof Promise) {j.then(resolve, reject)} else {resolve(j)}} catch (err) {reject(err)}})};if (this.state === "pending") {return new Promise((resolve, reject) => {self.onFulfilledCallbacks.push(() => {let f = onFulfilled(self.value)if (f instanceof Promise) {f.then(resolve, reject)} else {resolve(f)}})self.onRejectedCallbacks.push(() => {let j = onRejected(self.reason)if (j instanceof Promise) {j.then(resolve, reject)} else {resolve(j)}})})}}}

这样的话promise也能返回一个值,并且被后续的then获取到。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。