手写promise面试
时间: 2024-01-08 18:01:07 浏览: 43
手写Promise面试是一个通过手写代码来展示对Promise的理解和掌握程度的面试环节。在面试中,面试官往往会要求面试者用纸笔手写一个简单的Promise实现,或者是解答一些与Promise相关的问题。
首先,面试者需要熟悉Promise的基本概念和用法,包括Promise的三种状态(pending、fulfilled、rejected)、then方法的使用,以及Promise的错误处理等内容。
其次,在手写Promise的环节中,面试者需要能够清晰地表达出Promise的基本结构和实现方式,包括Promise的构造函数、resolve和reject方法的定义,以及then方法和catch方法的实现。
除此之外,面试者还需要展示出对Promise链式调用和异步操作的处理能力,以及如何正确地处理Promise中的错误和异常情况。
总的来说,手写Promise面试是一个考察面试者对Promise的理解程度、编码能力和解决问题能力的环节,通过这个环节,面试官可以更直观地了解面试者对Promise的掌握程度和工作实际能力。因此,在准备手写Promise面试时,面试者需要通过大量的练习和理解,确保自己能够熟练地手写出一个符合Promise规范的简单实现,并对相关问题进行正确的解答。
相关问题
手写promise 面试
在前端面试中,手写Promise是一个常见的考点。Promise是一种用于处理异步操作的技术,可以简化异步代码的编写和管理。以下是手写Promise的基本步骤:
1. 创建Promise构造函数:首先,你需要声明一个Promise构造函数,用于接收一个执行器函数作为参数。执行器函数中包含了异步操作的逻辑。
2. 实现Promise内部的状态管理:Promise有三种状态,分别是pending(进行中)、fulfilled(已成功)和rejected(已失败)。在构造函数中,你可以使用一个内部变量来管理Promise的状态。初始状态为pending。
3. 实现resolve和reject方法:在构造函数中,你需要定义resolve和reject方法,用于改变Promise的状态。resolve方法用于将Promise从pending状态改变为fulfilled状态,reject方法用于将Promise从pending状态改变为rejected状态。这两个方法通常会在异步操作成功或失败时被调用。
4. 添加then方法:在Promise的原型对象上添加then方法,用于处理Promise状态改变后的回调函数。then方法接收两个参数,分别是onResolved和onRejected,它们分别代表异步操作成功和失败时的回调函数。
5. 执行器函数中调用resolve和reject方法:在构造函数中的执行器函数中,你需要调用resolve方法将Promise的状态改变为fulfilled,并传递异步操作的结果;或者调用reject方法将Promise的状态改变为rejected,并传递失败的原因。
6. 执行then方法中的回调函数:当Promise的状态被改变后,then方法中的回调函数将会被执行。如果Promise的状态是fulfilled,则执行onResolved回调函数;如果Promise的状态是rejected,则执行onRejected回调函数。
通过上述步骤,你可以手写一个基本的Promise实现。这样在面试中,当你被要求手写Promise的时候,你就可以按照这个步骤来进行代码的编写。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [前端面试大厂手写源码系列(上)](https://download.csdn.net/download/weixin_38739950/14045217)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [面试准备之手写Promise](https://blog.csdn.net/weixin_49172439/article/details/124514197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [经典Promise面试题----手写Promise详细步骤(一)](https://blog.csdn.net/czj1049561601/article/details/113829149)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
手写 Promise
当然可以!以下是一个简单的手写Promise的示例:
```javascript
class Promise {
constructor(executor) {
this.state = 'pending';
this.value = undefined;
this.reason = undefined;
this.onResolveCallbacks = [];
this.onRejectCallbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onResolveCallbacks.forEach(callback => callback());
}
};
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
this.onRejectCallbacks.forEach(callback => callback());
}
};
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
then(onFulfilled, onRejected) {
const fulfilledHandler = typeof onFulfilled === 'function' ? onFulfilled : value => value;
const rejectedHandler = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };
const promise2 = new Promise((resolve, reject) => {
const fulfillHandlerWrapper = () => {
setTimeout(() => {
try {
const result = fulfilledHandler(this.value);
resolvePromise(promise2, result, resolve, reject);
} catch (error) {
reject(error);
}
}, 0);
};
const rejectHandlerWrapper = () => {
setTimeout(() => {
try {
const result = rejectedHandler(this.reason);
resolvePromise(promise2, result, resolve, reject);
} catch (error) {
reject(error);
}
}, 0);
};
if (this.state === 'fulfilled') {
fulfillHandlerWrapper();
} else if (this.state === 'rejected') {
rejectHandlerWrapper();
} else {
this.onResolveCallbacks.push(fulfillHandlerWrapper);
this.onRejectCallbacks.push(rejectHandlerWrapper);
}
});
return promise2;
}
catch(onRejected) {
return this.then(null, onRejected);
}
}
function resolvePromise(promise, result, resolve, reject) {
if (promise === result) {
return reject(new TypeError('Chaining cycle detected for promise'));
}
let thenCalledOrThrow = false;
if (result instanceof Promise) {
result.then(
value => resolvePromise(promise, value, resolve, reject),
reason => reject(reason)
);
} else if (result !== null && (typeof result === 'object' || typeof result === 'function')) {
try {
const then = result.then;
if (typeof then === 'function') {
then.call(
result,
value => {
if (thenCalledOrThrow) return;
thenCalledOrThrow = true;
resolvePromise(promise, value, resolve, reject);
},
reason => {
if (thenCalledOrThrow) return;
thenCalledOrThrow = true;
reject(reason);
}
);
} else {
resolve(result);
}
} catch (error) {
if (thenCalledOrThrow) return;
thenCalledOrThrow = true;
reject(error);
}
} else {
resolve(result);
}
}
```
这只是一个基本的实现,还有很多细节和功能可以改进。希望对你有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)