测试驱动来学习 Promise

基础功能

  • 测试案例:以同步的方式调用。
/*** v1: 基础功能*/
const p1 = new MyPromise((resolve, reject) => {resolve('success')reject('error')
})p1.then((value) => {console.log('v1: ', value)
}) 
  • 实现功能:在 status 和 value 的位置暂存值,在 then 函数中取出。
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'class MyPromise {status = PENDING;value = null;constructor(executor) {executor(this.resolve, this.reject);}resolve = (value) => {if (this.status === PENDING) {this.status = FULFILLED;this.value = value;}}reject = (value) => {if (this.status === PENDING) {this.status = REJECTED;this.value = value;}}then = (onFulfilled, onRejected) => {const callbackMap = {[FULFILLED]: onFulfilled,[REJECTED]: onRejected}callbackMap[this.status]?.(this.value)}
}

异步执行

  • 测试案例
/*** v2: 异步执行*/
const p2 = new MyPromise((resolve, reject) => {setTimeout(() => {resolve('success') // 异步结束后调用}, 1000)
})p2.then((value) => {console.log('v2: ', value)
})
  • 实现功能
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'class MyPromise {status = PENDING;value = null;fulfilledCallback = null; // 暂存 rejectrejectedCallback = null; // 暂存 rejectconstructor(executor) {executor(this.resolve, this.reject);}resolve = (value) => {if (this.status === PENDING) {this.status = FULFILLED;this.value = value;this.fulfilledCallback?.(value); // 异步结束后调用 resolve}}reject = (value) => {if (this.status === PENDING) {this.status = REJECTED;this.value = value;this.rejectedCallback?.(value); // 异步结束后调用 reject}}then = (onFulfilled, onRejected) => {const callbackMap = {[FULFILLED]: onFulfilled,[REJECTED]: onRejected,[PENDING]: () => {this.fulfilledCallback = onFulfilled;this.rejectedCallback = onRejected;}}callbackMap[this.status]?.(this.value)}
}

异步时多个then

  • 测试案例
/*** v3: 异步时多个then*/
const p3 = new MyPromise((resolve, reject) => {setTimeout(() => {resolve('success')}, 1000)
})p3.then((value) => {console.log('v3 - 1: ', value)
})
p3.then((value) => {console.log('v3 - 2: ', value)
})
// v3 - 1:  success
// v3 - 2:  success
  • 实现功能
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'class MyPromise {status = PENDING;value = null;fulfilledCallbacks = []; // 暂存 resolverejectedCallbacks = []; //  暂存 rejectconstructor(executor) {executor(this.resolve, this.reject);}resolve = (value) => {if (this.status === PENDING) {this.status = FULFILLED;this.value = value;while (this.fulfilledCallbacks.length) { // 遍历执行所有的 resolvethis.fulfilledCallbacks.shift()?.(value);}}}reject = (value) => {if (this.status === PENDING) {this.status = REJECTED;this.value = value;while (this.rejectedCallbacks.length) { // 遍历执行所有的 rejectthis.rejectedCallbacks.shift()?.(value);}}}then = (onFulfilled, onRejected) => {const callbackMap = {[FULFILLED]: onFulfilled,[REJECTED]: onRejected,[PENDING]: () => {this.fulfilledCallbacks.push(onFulfilled);  // 异步时多个thenthis.rejectedCallbacks.push(onRejected);}}callbackMap[this.status]?.(this.value)}
}

链式调用

  • 测试案例
const p4 = new MyPromise((resolve, reject) => {setTimeout(() => {resolve('success')}, 1000)
})p4.then((value) => {console.log('v4 - 1: ', value)return 1;
}).then((value) => {console.log('v4 - 2: ', value)return 2;
})
// v4 - 1:  success
// v4 - 2:  1
  • 实现功能
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'class MyPromise {status = PENDING;value = null;fulfilledCallbacks = [];rejectedCallbacks = [];constructor(executor) {executor(this.resolve, this.reject);}resolve = (value) => {if (this.status === PENDING) {this.status = FULFILLED;this.value = value;while (this.fulfilledCallbacks.length) {this.fulfilledCallbacks.shift()?.(value);}}}reject = (value) => {if (this.status === PENDING) {this.status = REJECTED;this.value = value;while (this.rejectedCallbacks.length) {this.rejectedCallbacks.shift()?.(value);}}}then = (onFulfilled, onRejected) => {return new MyPromise((resolve, reject) => {const fulfilledTask = (value) => {const res = onFulfilled(value); // 将上一个 Promise 的 resolve 结果传入当前 Promiseresolve(res);   // 确保返回的 Promise 被执行}const rejectedTask = (value) => {const res = onRejected(value);reject(res);    // 确保返回的 Promise 被执行}const callbackMap = {[FULFILLED]: fulfilledTask,[REJECTED]: rejectedTask,[PENDING]: () => {this.fulfilledCallbacks.push(fulfilledTask);  // 异步时多个thenthis.rejectedCallbacks.push(rejectedTask);    // 异步时多个then}}callbackMap[this.status]?.(this.value)})}
}

返回自身

  • 测试案例
/*
* v6: 返回自身
*/
const p6 = new MyPromise((resolve, reject) => {resolve(1);
});const p62 = p6.then((res) => {console.log(res);return p62;
});
p62.then(() => { },(err) => console.log(err)
);

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

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

相关文章

什么是MVC?什么是SpringMVC?什么是三层架构?

文章目录 应用分层什么是MVC?什么是 SpringMVC?三层架构三层架构和MVC的关系 应用分层 在讲解什么是MVC之前,先来理解一下什么是应用分层。 应用分层是一种软件开发设计思想,将应用程序划分成N个层次,每个层次都分别负责自己的…

StarryCoding 入门教育赛 3 题解C++

比赛链接&#xff1a;https://www.starrycoding.com/contest/8 A. 坐标变换 语法题&#xff0c;考察输入输出、循环结构、数学运算。 #include <bits/stdc.h> using namespace std; using ll long long;const ll p 998244353; const int N 2e5 9;void solve() {in…

鸿蒙应用开发之调用C++开发代码库1

由于鸿蒙应用主要基于ArkTS开发,主要使用的语言是ETS,也就是JS脚本方式来开发,这与C++语言开发是不同的语言,这样就不能直接相互调用,因为不同的语言使用不同的数据结构,不同的调用方式,不同的运行环境。要想在ETS语言里调用C++开发的代码,需要进行合适的转换,并且按指…

Java学习【类与对象—封装】

Java学习【类与对象—封装】 封装的概念封装的实现包的概念import 导包导包中*的介绍import static 导入包中的静态方法和字段 static关键字的使用static 修饰成员变量static修饰方法静态成员变量的初始化 代码块静态代码块非静态代码块/实例化代码块/构造代码块加载顺序 封装的…

什么是外呼系统?企业为什么使用ai电销外呼系统

说起ai电销外呼系统&#xff0c;或许有的人并不了解这是什么&#xff0c;但它却常常出现在我们的生活中&#xff0c;今天我们来看看什么是外呼系统&#xff0c;企业为什么使用ai电销外呼系统&#xff1f; 一、什么是外呼系统 外呼系统就是由系统自动拨打电话的&#xff0c;外呼…

单例模式(饿汉+懒汉)

单例模式 文章目录 单例模式定义饿汉式单例**饿汉式单例需要加volatile关键字吗**类加载过程 懒汉式单列 定义 单例模式(Singleton),保证一个类仅有一个实例&#xff0c;并提供一个访问它的全局访问点 饿汉式单例 饿汉式单例是Java中实现单例模式的一种方式&#xff0c;它在类…

HTML常见标签-标题标签

标题标签 标题标签一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等,有h1到h6六级标题 代码 <body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5>…

视频提取gif的手机端操作方法?看看这个就会了

Gif图片是一种非常流行的格式&#xff0c;广泛应用于社交媒体、网络宣传单等。它们能够轻松的吸引大众的注意力&#xff0c;在使用聊天软件的时候我们常常会使用gif动图表情包来调节聊天氛围。Gif动图比普通的图片有趣&#xff0c;也比视频的体积要小。我们想要通过手机来把视频…

从需求到实现:能源软件服务商如何量身定制企业解决方案

能源行业需要数字化转型的原因主要有以下几点&#xff1a;首先&#xff0c;数字化技术可以提高生产效率和安全性&#xff0c;通过实时监控和智能调度降低事故风险&#xff0c;并实现远程控制和自动化生产。其次&#xff0c;数字化转型有助于推动能源行业的创新发展&#xff0c;…

GPT-4o正式发布;零一万物发布千亿参数模型;英国推出AI评估平台

OpenAI 正式发布 GPT-4o 今天凌晨&#xff0c;OpenAI 正式发布 GPT-4o&#xff0c;其中的「o」代表「omni」&#xff08;即全面、全能的意思&#xff09;&#xff0c;这个模型同时具备文本、图片、视频和语音方面的能力&#xff0c;甚至就是 GPT-5 的一个未完成版。 并且&…

本地安装nvm,管理多版本node

先卸载本地的nodejs(14.16.1) 卸载的直接可以点击win10图标→设置→应用→应用和功能 卸载nodejs即可 2. 安装nvm&#xff0c;地址&#xff1a;https://github.com/coreybutler/nvm-windows/releases 安装目录时尽量不要出现特殊字符还有空格&#xff0c;否则会在nvm use xxx的…

HTML常用标签-列表标签

列表标签 有序列表 分条列项展示数据的标签, 其每一项前面的符号带有顺序特征 无序列表 分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征 有序列表标签 ol无序列表标签 ul列表项标签 li代码 <!-- 有序列表 --><ol><li>JAVA</li><li>前…

python的文件处理

文件分为文本文件和二进制文件&#xff1a; 我这样理解&#xff1a;就是电脑上用记事本打开我们可以看懂的文件就是文本文件&#xff0c;比如docx&#xff0c;txt&#xff0c;cpp&#xff0c;json&#xff0c;md等。直接点开看不懂的就是二进制文件&#xff0c;比如png&#xf…

考研数学|强化《660》+《880》这样刷,太丝滑了❗️

660题880题需要大概两个月才能做完 660题和880题都是很高质量的题集&#xff0c;所以做起来一点也不轻松。 每年都会有学生暑假两个月只做了一本660题的情况&#xff0c;因为题目实在是太难&#xff0c;有点做不下去的感觉。 不过不要担心&#xff0c;暑假就是刷题发现问题的…

k8s 网络组件详细 介绍

目录 一 k8s 有哪些网络组件 二 k8s 网络概念 1&#xff0c; k8s 三种网络 2&#xff0c;K8S 中 Pod 网络通信 2.1 Pod 内容器与容器之间的通信 2.2 同一个 Node 内 Pod 之间的通信 2.3 不同 Node 上 Pod 之间的通信 三 Flannel 网络组件 1&#xff0c;Flannel …

C++干货--引用

前言&#xff1a; C的引用&#xff0c;是学习C的重点之一&#xff0c;它与指针的作用有重叠的部分&#xff0c;但是它绝不是完全取代指针(后面我们也会简单的分析)。 引用的概念&#xff1a; 引用 不是新定义一个变量 &#xff0c;而 是给已存在变量取了一个别名 &#xf…

spring boot 线程池的应用

文章目录 引言I 配置线程池II 封装线程池任务执行器2.1 唯一性标识2.2 LogFilter:设置request_id2.3 logback使用request_idIII 检测线程池引言 SpringBootApplication启动类上需要加入注解@EnableAsync或者在配置类上使用 应用场景:封装线程池任务执行器:在任务提交时,会…

学习uni-app期间css样式的导入、单位属性和ui工具关系

css单位属性 css中单位有&#xff1a; px &#xff1a;屏幕像素 vw&#xff1a;屏幕宽度 vh &#xff1a;屏幕高度 rpx &#xff1a;响应式 px&#xff0c;一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准&#xff0c;750rpx 恰好为屏幕宽度。屏幕变宽&#xff0c;rp…

【转载】【亲测可用】Ubuntu18.04安装VTK-8.2.0

这篇文章转载大部分都参考自下面的链接&#xff0c;注意cmake的版本&#xff0c;如果版本不对是编译失败的 https://blog.csdn.net/qq_42257666/article/details/124574029?ops_request_misc%257B%2522request%255Fid%2522%253A%2522171566768016800182751339%2522%252C%2522…

Power query与Excel的区别,优势?

Power Query是Microsoft Excel的一个强大数据导入、转换和自动化的插件工具&#xff0c;它在Excel 2010之后的版本中被发布出来&#xff0c;随着时间的发展&#xff0c;功能不断增强。 以下是Power Query的一些优势以及它与Excel传统数据处理方式的区别和一些令人印象深刻的功…