技术文摘
从零构建一个 Promise
从零构建一个 Promise
在 JavaScript 中,Promise 是一种强大的异步编程解决方案,它帮助我们更优雅地处理异步操作和回调地狱问题。让我们从零开始构建一个简单的 Promise 实现。
定义一个 MyPromise 类。
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = undefined;
this.callbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state ='resolved';
this.value = value;
this.callbacks.forEach(callback => callback.onResolved(value));
}
};
const reject = (reason) => {
if (this.state === 'pending') {
this.state ='rejected';
this.value = reason;
this.callbacks.forEach(callback => callback.onRejected(reason));
}
};
executor(resolve, reject);
}
then(onResolved, onRejected) {
return new MyPromise((resolve, reject) => {
if (this.state ==='resolved') {
try {
const result = onResolved(this.value);
resolve(result);
} catch (error) {
reject(error);
}
} else if (this.state ==='rejected') {
try {
const result = onRejected(this.value);
resolve(result);
} catch (error) {
reject(error);
}
} else {
this.callbacks.push({ onResolved, onRejected });
}
});
}
}
在上述代码中,MyPromise 类的构造函数接受一个执行器函数 executor,它会立即执行,并传入两个函数 resolve 和 reject 用于改变 Promise 的状态和值。
then 方法用于注册成功和失败的回调函数,并根据当前 Promise 的状态来决定是否立即执行回调。
通过这样简单的实现,我们已经初步构建了一个具有基本功能的 Promise。在实际应用中,还可以进一步扩展和优化,比如添加 catch 方法处理错误、实现多个 then 链的正确处理等。
从零构建 Promise 有助于我们更深入地理解其工作原理和内部机制,从而在开发中更灵活地运用异步编程。希望这个简单的示例能为您开启探索 Promise 的大门。
TAGS: JavaScript Promise 构建 从零开始学 Promise Promise 开发指南 构建自定义 Promise
- 2022 年 JS 令人烧脑的面试题,你能答对多少
- 线上高并发量日志输出为何不应带有代码位置
- Infinity 在 JavaScript 中的奇妙之境
- JavaScript 中堆栈、堆、队列数据结构的学习与图片讲解
- Vue2 响应式系统分支切换探秘
- vivo 短视频推荐去重服务的设计之路
- Go 中 http.Response Read 行为的调试难题
- 时代的“大杀器”——数据编织
- Java 网络编程基础:Servlet 与 Servlet 容器
- Spring 接口下 Caffeine 与 Redis 两级缓存的集成
- 高并发设计的技术方案有哪些?
- 怎样高效开发相似图像搜索引擎
- 探讨 React 18 给 Hooks 带来的影响
- Python 中 import 的工作原理是什么?
- IDEA 中创建与部署 JavaWeb 程序的方法