Promise实现原理解析，及实现方法。

Promise原理解析

  • Promise的介绍
  • 原理分析
  • 源码实现
    • 发布部分全部代码
    • 订阅部分基础代码
    • 简单发布订阅完整代码
    • 测试订阅能力
    • 链式调用的实现
    • 完整链式调用代码
    • 链式调用Promise完整功能代码

Promise的介绍

一，Promise的理解
在JavaScript中，Promise是一种用于处理异步操作的对象。它代表了一个尚未完成但预期在未来某个时间点完成的操作。Promise对象可以处于以下三种状态之一：

Pending（等待）：初始状态，既不是成功，也不是失败状态。
Fulfilled（已成功）：意味着操作成功完成。
Rejected（已失败）：意味着操作失败。

这几种状态的转换需要遵循一定原则， 失败或者成功只能由padding状态转换。

padding -> fulfilledpadding -> rejected

其使用可以链式调用，在await/async没出来之前，优雅的解决了回调地狱，增强了代码的可读性。

doSomething().then(function(result) {return doSomethingElse(result);}).then(function(newResult) {return doThirdThing(newResult);}).then(function(finalResult) {console.log('最终的结果:', finalResult);}).catch(function(error) {console.error('捕获到错误:', error);});

原理分析

Promise使用了发布订阅模式。一开始我也是很难理解，后面知道是发布订阅模式一切都变的简单了。因为这种模式在生活中随处可见，我们常用的通信软件。订餐，订酒店，打车。都是商家或司机发布他们的服务之后，消费者去订阅这个服务。他们的服务有可能结束有可能在继续，就像酒店没房间了，或者早上没有热奶茶只有冰奶茶的。消费者在订阅的时候就能看到服务的结果，就会影响接下来的行为。

假如打了一个车，这个时候就要等司机师傅开车来接我们，也就是司机师傅在发布他们的服务之后就进入了一个等待状态，等待乘客打车，这个时候相当于于Promise初始的pedding状态。在我们打到车之后，就订阅了这个司机师傅的服务。如果司机师傅就在附近，那么们立即就能上车，就提前进入了fulfilled状态。如果司机师傅不在附近，那我们就需要等待司机师傅开车来接我们。如果因为中途路况不佳，司机师傅来不了，为表歉意主动告诉情况并取消了订单。就相当于这次打车失败，被拒绝了。进入了rejected状态。如果司机师傅如约而来，我们上车。就打车成功了。进入fulfilled状态。本次打车就结束了。

再如果我们上车之后，发现之前的打车地点输错了。需要修改打车地点。那么这个时候，就要和司机师傅协商修改目的地。在我们设定好新目的地之后。就需要坐在车里面等待司机师傅送我们去。这里修改打车目的地就像于重新订阅。而上车之后的过程就相当于重新进入走了一个Promise。发布订阅。这个过程就是链式调用。

源码实现

回到代码层面。就是我们现在要做一件事情，结果要在未来某的时间点抛出。

定义常量

const STATUS_PADDING = 'padding';
const STATUS_FULFILLED = 'fulfilled';
const STATUS_REJECTED = 'rejected';

定义一个类， 构造传参是一个函数， 而入参函数又有两个参数分别是 resolve, reject。定义value和reason属性存储成功和失败的结果

/*** 自自定义Promise*/
class CustomPromise {constructor(executor) {this.value = null;this.reason = null;this.status = STATUS_PADDING;const resolve = (value) => {}const reject = (reason) => {}try {executor(resolve, reject) } catch (error) {reject(error)}}
}

在这里里面我们初始化CustomPromise类的时候，要执行的操作是在executor回调函数里，resolve和reject分别把当次执行的成功或失败结果传递出去。

const test2 = new CustomPromise((resolve, reject) => {setTimeout(() => {if (Math.random() > 0.5) {resolve('小于零点五')} else {reject('大于零点五')}}, 1000)
})

我们这个时候已经可以把结果传递出去了，但是状态还没有改变，这个时候状态也要改变一下，并把结果保存下来。

    const resolve = (value) => {if (this.status === STATUS_PADDING) {this.status = STATUS_FULFILLED;this.value = value;}const reject = (reason) => {if (this.status === STATUS_PADDING) {this.status = STATUS_REJECTED;this.reason = reason;}}

拿到结果后就已经完成了发布。别人还不能订阅。需要创建订阅数组来保存订阅方法，以便在在发布的时候通知订阅者结果。
这样在调用resolve和reject的时候就把结果传递给了订阅者。

    this.onRejectCallbacks = []this.onResolveCallbacks = []const resolve = (value) => {if (this.status === STATUS_PADDING) {this.status = STATUS_FULFILLED;this.value = value;this.onResolveCallbacks.forEach(fn => fn(value))}}const reject = (reason) => {if (this.status === STATUS_PADDING) {this.status = STATUS_REJECTED;this.reason = reason;this.onRejectCallbacks.forEach(fn => fn(reason))}}

发布部分全部代码

/*** 自自定义Promise*/
class CustomPromise {constructor(executor) {this.value = null;this.reason = null;this.status = STATUS_PADDING;this.onRejectCallbacks = []this.onResolveCallbacks = []const resolve = (value) => {if (this.status === STATUS_PADDING) {this.status = STATUS_FULFILLED;this.value = value;this.onResolveCallbacks.forEach(fn => fn(value))}}const reject = (reason) => {if (this.status === STATUS_PADDING) {this.status = STATUS_REJECTED;this.reason = reason;this.onRejectCallbacks.forEach(fn => fn(reason))}}try {executor(resolve, reject) } catch (error) {reject(error)}}
}

订阅部分基础代码

完成发布之后，还需要订阅者订阅结果。这个方法是then方法。新建一个then方法。then方法里有个函数作为参数，分别是执行成功或失败的监听。这这两个回调方法中的内容需要开发者自行处理。我们把这两个方法传递给监听结果的结果执行数组就是算完成了订阅。

  then(onFulfilled, onRejected) {onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };if (this.status === STATUS_FULFILLED) {onFulfilled(this.value)}if (this.status === STATUS_REJECTED) {onRejected(this.reason)}if (this.status === STATUS_PADDING) {this.onResolveCallbacks.push(onFulfilled)this.onRejectCallbacks.push(onRejected)}}

简单发布订阅完整代码

如果状态已经不是padding状态，那么就立即把结果传递出去，如果是就把执行方法保存起来，完成订阅。这样一个简单的发布订阅就实现，让们看下完成代码，

/*** 自自定义Promise*/
class CustomPromise {constructor(executor) {this.value = null;this.reason = null;this.status = STATUS_PADDING;this.onRejectCallbacks = []this.onResolveCallbacks = []const resolve = (value) => {if (this.status === STATUS_PADDING) {this.status = STATUS_FULFILLED;this.value = value;this.onResolveCallbacks.forEach(fn => fn(value))}}const reject = (reason) => {if (this.status === STATUS_PADDING) {this.status = STATUS_REJECTED;this.reason = reason;this.onRejectCallbacks.forEach(fn => fn(reason))}}try {executor(resolve, reject) } catch (error) {reject(error)}}then(onFulfilled, onRejected) {onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };if (this.status === STATUS_FULFILLED) {onFulfilled(this.value)}if (this.status === STATUS_REJECTED) {onRejected(this.reason)}if (this.status === STATUS_PADDING) {this.onResolveCallbacks.push(onFulfilled)this.onRejectCallbacks.push(onRejected)}}
}

测试订阅能力

让我们测试一下功能吧。
在这里插入图片描述
功能是ok，我们实现了Promise最基础的能力。

链式调用的实现

只是实现了订阅还是不够的，Promise能够执行链式调用。而目前的能力还不支持。回想上面提到的打车案例，链式调用相当于一个新的Promise执行。所以返回结果要返回一个新的Promise。在新的Promise初始化执行函数里面完成订阅，把结果传递下去。

  then(onFulfilled, onRejected) {onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };return new CustomPromise((resolve, reject) => {// todoif (this.status === STATUS_FULFILLED) {onFulfilled(this.value)}if (this.status === STATUS_REJECTED) {onRejected(this.reason)}if (this.status === STATUS_PADDING) {this.onResolveCallbacks.push(onFulfilled)this.onRejectCallbacks.push(onRejected)}})}

新的Promise的resolve和reject并不能确定调用时机，所以我需要和订阅的方法进行封装，让在执行了订阅的结果之后，把结果传递给新的Promise。

      const handleFulfilled = (value) => {try {const result = onFulfilled(value)if (result instanceof CustomPromise) {result.then(resolve, reject)} else {resolve(result)}} catch (error) {reject(error)}}const handleRejected = (reason) => {try {const result = onRejected(reason)if (result instanceof CustomPromise) {result.then(resolve, reject)} else {reject(result)}} catch (error) {reject(error)}}

封装后的订阅方法

      if (this.status === STATUS_FULFILLED) {handleFulfilled(this.value)}if (this.status === STATUS_REJECTED) {handleRejected(this.reason)}if (this.status === STATUS_PADDING) {this.onResolveCallbacks.push(handleFulfilled)this.onRejectCallbacks.push(handleRejected)}

完整链式调用代码

  then(onFulfilled, onRejected) {onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };return new CustomPromise((resolve, reject) => {const handleFulfilled = (value) => {try {const result = onFulfilled(value)if (result instanceof CustomPromise) {result.then(resolve, reject)} else {resolve(result)}} catch (error) {reject(error)}}const handleRejected = (reason) => {try {const result = onRejected(reason)if (result instanceof CustomPromise) {result.then(resolve, reject)} else {reject(result)}} catch (error) {reject(error)}}if (this.status === STATUS_FULFILLED) {handleFulfilled(this.value)}if (this.status === STATUS_REJECTED) {handleRejected(this.reason)}if (this.status === STATUS_PADDING) {this.onResolveCallbacks.push(handleFulfilled)this.onRejectCallbacks.push(handleRejected)}})}

让们来测试一下吧
在这里插入图片描述

测试结果也是ok的。我们已经完成了链式调用。

链式调用Promise完整功能代码

/*** 自自定义Promise*/
class CustomPromise {constructor(executor) {this.value = null;this.reason = null;this.status = STATUS_PADDING;this.onRejectCallbacks = []this.onResolveCallbacks = []const resolve = (value) => {if (this.status === STATUS_PADDING) {this.status = STATUS_FULFILLED;this.value = value;this.onResolveCallbacks.forEach(fn => fn(value))}}const reject = (reason) => {if (this.status === STATUS_PADDING) {this.status = STATUS_REJECTED;this.reason = reason;this.onRejectCallbacks.forEach(fn => fn(reason))}}try {executor(resolve, reject) } catch (error) {reject(error)}}then(onFulfilled, onRejected) {onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };return new CustomPromise((resolve, reject) => {const handleFulfilled = (value) => {try {const result = onFulfilled(value)if (result instanceof CustomPromise) {result.then(resolve, reject)} else {resolve(result)}} catch (error) {reject(error)}}const handleRejected = (reason) => {try {const result = onRejected(reason)if (result instanceof CustomPromise) {result.then(resolve, reject)} else {reject(result)}} catch (error) {reject(error)}}if (this.status === STATUS_FULFILLED) {handleFulfilled(this.value)}if (this.status === STATUS_REJECTED) {handleRejected(this.reason)}if (this.status === STATUS_PADDING) {this.onResolveCallbacks.push(handleFulfilled)this.onRejectCallbacks.push(handleRejected)}})}
}

以上们已经实现了Promise的链式调用。在下一篇中将讲到Promise一些常用方法的实现，让我们一起探索编程的乐趣吧。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/65836.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

http报头解析

http报头解析

http报文 http报文主要有两类是常见的，第一类是请求报文，第二类是响应报文，每个报头除了第一行，都是采用键值对进行传输数据，请求报文的第一行主要包括http方法（GET，PUT， POST&#…
阅读更多...
【日常开发】Git Stash使用技巧

【日常开发】Git Stash使用技巧

文章目录 引言一、git stash 基础命令（一）存储当前工作区的修改（二）查看存储列表 二、查看存储的内容（一）查看特定存储的详细内容（二）查看特定存储修改的文件列表 三、恢复存储的修改…
阅读更多...
微服务保护-sentinel

微服务保护-sentinel

为什么要有微服务保护？ 微服务保护是为了避免微服务雪崩而出现的，每个微服务能处理的请求是有限的，如果一个微服务出现问题导致一个请求进入微服务的时间太久，就会导致大量去请求停滞在微服务内部，这样就会过分占用系统…
阅读更多...
【Redis】Redis 典型应用 - 缓存 (cache)

【Redis】Redis 典型应用 - 缓存 (cache)

目录 1. 什么是缓存 2. 使用 Redis 作为缓存 3. 缓存的更新策略 3.1 定期生成 3.2 实时生成 4. 缓存的淘汰策略 5. 缓存预热, 缓存穿透, 缓存雪崩 和 缓存击穿 关于缓存预热 (Cache preheating) 关于缓存穿透 (Cache penetration) 关于缓存雪崩 (Cache avalanche) 关…
阅读更多...
关于easy-es对时间范围查询遇到的小bug

关于easy-es对时间范围查询遇到的小bug

前言：在使用easy-es之前作为一个小白的我只有es原生查询的基础，在自己通过查看官方文档自学easy-es遇到了一个挫折，其他的还好语法和MybatisPlus差不多，正以为我觉得很快就能入手，在对时间范围的判断就给我当头一棒&am…
阅读更多...
Python读取TIF文件

Python读取TIF文件

在Python中，逐帧读取TIFF文件（尤其是多页TIFF文件）可以使用tifffile库或Pillow库。以下是两种方法的示例： 方法 1：使用 tifffile 逐帧读取 tifffile 是一个专门用于处理TIFF文件的库，支持多页TIFF文件的逐…
阅读更多...
只谈C++11新特性 - 显式转换函数

只谈C++11新特性 - 显式转换函数

显式转换函数 背景与问题 在 C11 之前&#xff0c;explicit 关键字只能用于构造函数。其作用是阻止构造函数在需要隐式转换时被调用。例如&#xff1a; 示例问题&#xff08;C11 之前的 explicit 用法&#xff09; #include <iostream>class Example { public:explic…
阅读更多...
从0到机器视觉工程师（一）：机器视觉工业相机总结

从0到机器视觉工程师（一）：机器视觉工业相机总结

目录 相机的作用 工业相机 工业相机的优点 工业相机的种类 工业相机知名品牌 光源与打光 打光方式 亮暗场照明 亮暗场照明的应用 亮暗场照明的区别 前向光漫射照明 背光照明 背光照明的原理 背光照明的应用 同轴光照明 同轴光照明的应用 总结 相机的作用 相机…
阅读更多...
HTML——53. 创建表单

HTML——53. 创建表单

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>创建表单</title></head><body><!--form标签用于创建一个表单&#xff0c;会将里面的内容一起发送服务器&#xff0c;其结构类似于表格--><!--表…
阅读更多...
逐行讲解大模型流式输出 streamer 源码

逐行讲解大模型流式输出 streamer 源码

目录 简介TextStreamer 基础流式输出TextIterateStreamer 迭代器流式输出本地代码模型加载并前端展示streamlit 输出显示gradio 输出显示 vllm 部署模型并前端展示streamlit 输出显示gradio 输出显示 备注 简介 本文详细讲解了大模型流式输出的源码实现&#xff0c;包括TextSt…
阅读更多...
java_使用阿里云oss服务存储图片

java_使用阿里云oss服务存储图片

什么情况下可以使用阿里云oss服务存储图片&#xff1f; 对图片的访问速度有高要求时使用&#xff0c;方便用户快速的&#xff08;比如在网页页面中&#xff09;访问到图像 参考&#xff1a;41 尚上优选项目-平台管理端-商品信息管理模块-阿里云OSS介绍_哔哩哔哩_bilibili 1.…
阅读更多...
第5章 共享内存范式：C语言层面

第5章 共享内存范式：C语言层面

5.1OpenMP 5.1.1OpenMP的介绍 OpenMP三个原则 5.2OpenMP的使用 编译制导指令以#pragma omp 开始&#xff0c;后边跟具体的功能指令&#xff0c;格式如:#pragma omp 指令[子句[,子句].]。常用的功能指令如下: 5.2.1编译制导 5.2.2API和环境变量 具体案例-邻接矩阵 // 本代码…
阅读更多...
全国青少年信息学奥林匹克竞赛（信奥赛）备考实战之循环结构（for循环语句）（七）

全国青少年信息学奥林匹克竞赛（信奥赛）备考实战之循环结构（for循环语句）（七）

实战训练—鸡兔同笼 问题描述&#xff1a; 一个笼子里面关了鸡和兔子&#xff08;鸡有2只脚&#xff0c;兔子有4只脚&#xff0c;没有例外&#xff09;。已经知道了笼子里面脚的总数为a&#xff0c;问笼子里面至少有多少只动物&#xff0c;至多有多少只动物。 输入格式&…
阅读更多...
web 开发全局覆盖文件上传身份验证漏洞利用

web 开发全局覆盖文件上传身份验证漏洞利用

全局覆盖 首先认识全局变量和局部变量 再一个就是知道全局变量是全局使用的并且有个特点就是可以覆盖 这个就是全局变量我们输出一下发现 z居然等于函数内的计算值 把我们原来定义的全局变量 $z给覆盖了 看一下局部变量 这个时候 z就不会被覆盖 <?php $x1; $y2; …
阅读更多...
No.2十六届蓝桥杯备战|练习题4道|数据类型|字符型|整型|浮点型|布尔型|signed|unsigned(C++)

No.2十六届蓝桥杯备战|练习题4道|数据类型|字符型|整型|浮点型|布尔型|signed|unsigned(C++)

B2002 Hello,World! - 洛谷 #include <iostream> using namespace std; int main() { cout << "Hello,World!" << endl; return 0; }打印飞机 #include <iostream> using namespace std;int main() {cout << " …
阅读更多...
46. Three.js案例-创建颜色不断变化的立方体模型

46. Three.js案例-创建颜色不断变化的立方体模型

46. Three.js案例-创建颜色不断变化的立方体模型 实现效果 知识点 Three.js基础组件 WebGLRenderer THREE.WebGLRenderer是Three.js提供的用于渲染场景的WebGL渲染器。它支持抗锯齿处理&#xff0c;可以设置渲染器的大小和背景颜色。 构造器 antialias: 是否开启抗锯齿&am…
阅读更多...
5.系统学习-PyTorch与多层感知机

5.系统学习-PyTorch与多层感知机

PyTorch与多层感知机 前言PyTroch 简介张量&#xff08;Tensor&#xff09;张量创建张量的类型数据类型和 dtype 对应表张量的维度变换&#xff1a;张量的常用操作矩阵或张量计算 Dataset and DataLoaderPyTorch下逻辑回归与反向传播数据表格 DNN&#xff08;全连结网络&#x…
阅读更多...
WPF中的Microsoft XAML Behaviors包功能详解

WPF中的Microsoft XAML Behaviors包功能详解

什么是XAML Behaviors(行为) XAML Behaviors 提供了一种简单易用的方法&#xff0c;能以最少的代码为 Windows UWP/WPF 应用程序添加常用和可重复使用的交互性。 但是Microsoft XAML Behaviors包除了提供常用的XAML Behaviors之外&#xff0c;还提供了一些Trigger&#xff08…
阅读更多...
运维人员的Go语言学习路线

运维人员的Go语言学习路线

以下是一份更为详细的适合运维人员的Go语言学习路线图&#xff1a; 一、基础环境搭建与入门&#xff08;第 1 - 2 周&#xff09; 第 1 周 环境搭建 在本地开发机和常用的运维服务器环境&#xff08;如 Linux 系统&#xff09;中安装 Go 语言。从官方网站&#xff08;https://…
阅读更多...
设置虚拟机设备的dp和pt

设置虚拟机设备的dp和pt

虚拟机有设置px的方式&#xff0c;没有设置dp的方式&#xff0c;举个例子比如设置px为1080*1920虚拟机是有的 此时如果需要375dp宽度的虚拟机&#xff0c; 需要以下步骤 通过日志打印px和density&#xff0c;计算出当前的dp根据density和dp&#xff0c;计算如果需要相应的dp需…
阅读更多...
最新文章

Copyright @ 2022~2023