技术文摘
从零构建一个 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
- Vue CLI 项目中引入公共 HTML 模板的方法
- 在Vue CLI项目中引入公共模板的方法
- CSS代码修改滚动条滚动方向的方法
- Vue CLI项目中引入公共模板的方法
- Flex 布局下怎样避免 `flex:1` 与 `width: 0` 致使空间被挤掉
- 反转网页滚动条方向的方法
- Vue3 项目中如何实现路由跳转与返回旧页面并保留数据
- 解决构建搜索框历史记录时的失焦问题方法
- CSS绘制带外边框的等腰梯形方法
- 闭包中变量n每次调用重新初始化而num会累加的原因
- Vue标签怎样转换为可显示的HTML元素
- JavaScript代码实现给表格行添加阴影背景的方法
- DOM不能将值渲染到网页,checkbox选中后任务为何不能归类到已完成
- Vue 中 Deep 样式不生效的原因
- CSS中多个类选择器声明时最后声明样式覆盖前面样式的原因