JavaScript面试必考之实现手写Promise
作者:你也向往长安城吗 发布时间:2024-04-16 10:38:49
标签:JavaScript,手写,Promise
Promise手写
Promise作为面试必考题,Promise的手写也是面试官必问的问题,所以对于Promise我们一定要了解透彻
框架
(function(window) {
MyPromise.prototype.then = function (onResolved, onRejected) {}
MyPromise.prototype.catch = function (onRejected) {}
function MyPromise(executor){
function resolve(value){}
function reject(error){}
try{
executor(resolve, reject)
}catch(error){
reject(error)
}
}
window.MyPromise = MyPromise
}(window))
完整代码
(function (window) {
//将.then,.catch方法挂载在MyPromise原型上
MyPromise.prototype.then = function (onResolved, onRejected) {//.then接受两个回调函数,resolved状态和rejeced状态
// .then返回一个promise对象
return new MyPromise((resolve, reject) => {
let self = this;
if (self.status === 'pending') {//如果MyPromise状态为pending,将两个回调函数push进回调数组中等待
this.callbacks.push({ onResolved, onRejected })
} else if (self.status === 'resolved') { //如果MyPromise状态为resolved,将onResolved直接调用
setTimeout(() => {
//检查.then中的回调有没有return返回值
const result = onResolved(self.data)
//如果没有return返回值,默认返回promise对象
if (result instanceof MyPromise) {
result.then((res => resolve(res), err => reject(err)))
return result
} else {
resolve(result)
}
})
} else {
setTimeout(() => {
onResolved(self.data)
})
}
})
}
MyPromise.prototype.catch = function (onRejected) { //.catch接受一个回调函数
if (this.status === 'pending') {
// 将回调函数放入callbacks数组中
this.callbacks.push({ onRejected })
} else if (this.status === 'rejected') {
setTimeout(() => {
onRejected(this.data)
})
}
}
// MyPromise构造函数接受一个执行函数
function MyPromise(executor) {
const self = this;
self.data = undefined;
self.callbacks = []
//设置promise对象初始状态为pending
self.status = 'pending'
//执行函数第一个参数为resolve回调
function resolve(value) {
//如果状态不是pending,则直接返回
if (self.status !== 'pending') {
return
}
// 执行resolve,promise对象状态变更
self.status = 'resolved';
// 拿到resolve中的值
self.data = value;
// 调用callbacks中的回调函数
if (self.callbacks.length > 0) {
setTimeout(() => {
self.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value)
});
})
}
}
// 执行函数第二个参数为rejecr回调
function reject(error) {
//如果状态不是pending,则直接返回
if (self.status !== 'pending') {
return
}
// 执行resolve,promise对象状态变更
self.status = 'rejected';
// 拿到resolve中的值
self.data = error;
// 调用callbacks中的回调函数
if (self.callbacks.length > 0) {
setTimeout(() => {
self.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(value)
});
})
}
}
//使用try catch捕获错误
try {
// 在try内执行执行函数
executor(resolve, reject)
} catch (error) {
// 如果出错,默认执行reject
reject(error);
}
}
window.MyPromise = MyPromise
}(window))
测试
resolve
let MyPromiseTest = new MyPromise((resolve, reject) => {
resolve('resolve')
})
MyPromiseTest.then(res => {
console.log(res);
})
// resolve
let MyPromiseTest = new MyPromise((resolve, reject) => {
resolve('resolve');
})
MyPromiseTest.then(res => {
console.log(res);
})
.then(res => {
console.log('我是.then()后面的.then()');
})
// resolve
// 我是.then()后面的.then()
reject
let MyPromiseTest = new MyPromise((resolve, reject) => {
reject('reject')
})
MyPromiseTest.catch(err => {
console.log(err);
})
// reject
let MyPromiseTest = new MyPromise((resolve, reject) => {
console.log(a);
})
MyPromiseTest.catch(err => {
console.log('捕获错误' + ':' + err);
})
// 捕获错误:ReferenceError: a is not defined
来源:https://juejin.cn/post/7152725416040464421
0
投稿
猜你喜欢
- 任何熟悉SQL和关系数据库的人都遇见过大量的连接类型。最简单的说,连接(join)会把两个表的内容组合到一个虚拟表或者recordset内。
- 配置如下TEMPLATES = [下面'context_processors': [中添加'django.core.
- exec函数,可以循环定义、赋值多个变量exec ("temp%s=1"%1)这段代码的意思是,让exec执行temp1
- PDO::beginTransactionPDO::beginTransaction 启动一个事务(PHP 5 >= 5.1.0, P
- 问题:一台服务器的PHP程序通过localhost地址无法连接数据库,但是如果设置为127.0.0.1则可以正常连接,连接其他数据库服务器也
- python random库简单使用demo当我们需要生成随机数或者从一个序列中随机选择元素时,可以使用 Python 内置的 random
- 这篇文章主要介绍了Python socket聊天脚本代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需
- 画外接矩形框,可以画成一个最大的,也可以分别画。# -*- coding: utf-8 -*-import cv2image = cv2.i
- 什么是协程协程是python种一种实现多任务的方式,他是一种比线程更加小的单元,占用更小的执行单元(资源),为啥说他是一个执行单元,因为他自
- 前言最近在爬行 nosec.org 的数据,看了下需要模拟登录拿到cookie后才能访问想抓的数据,重要的是 nosec.org 的登录页面
- 概述虽然现在关系型数据库越来越相似,但其背后的实现机制可能大相径庭。实际使用方面,因为SQL语法规范的存在使得我们熟悉多种关系型数据库并非难
- 按单字节计算字符串的长度,汉字算两个字节。<script type="text/JavaScript"
- 1. 概述JSON (JavaScript Object Notation)是一种使用广泛的轻量数据格式. Python标准库中的json模
- 偶然在Google发现了他们的用户体验设计原则,因此翻译作一下记录。1.以人为本 —他们的生活、他们的工作和他们的梦想2.珍惜每一毫秒的时间
- 要写爬虫爬取大量的数据,就会面临ip被封的问题,虽然可以通过设置延时的方法来延缓对网站的访问,但是一旦访问次数过多仍然会面临ip被封的风险,
- 对于字典,通过“键”获得“值”非常简单,但通过“值”获得“键”则需绕些弯子。一、通用:自行定义函数方式假设:输入:一个字典(dic)+要找的
- phpMyAdmin错误 缺少 mysqli 扩展。请检查 PHP 配置 的解决方案phpMyAdmin 缺少 mysqli 扩展。请检查
- 刚接触 Go 语言时,就听说有一个叫rune的数据类型,即使查阅过一些资料,对它的理解依旧比较模糊,加之对陌生事物的天然排斥,在之后很长一段
- 前天由于某些原因需要利用C++调用PyTorch,于是接触到了LibTorch,配了两天最终有了一定的效果,于是记录一下。环境PyTorch
- Scala的环境搭建由于scala是基于java来开发的, 编写的java类可以使用javac命令编译成.class文件被JVM加载到内存中