自定义实现promise的功能,包括三种状态,then函数,resolve和reject函数
时间: 2024-03-25 11:41:31 浏览: 79
好的,我可以帮您实现一个简单的 Promise。
首先,Promise 有三种状态:pending(等待中)、fulfilled(已成功)和 rejected(已失败)。
我们可以通过一个变量来表示当前的状态,例如:
```javascript
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
let status = PENDING;
```
接下来,我们需要实现一个 Promise 构造函数,它接受一个函数作为参数,这个函数又接受两个参数,一个是 resolve 函数,一个是 reject 函数。这个函数在被调用时会执行一些异步操作,并在异步操作完成后调用 resolve 或 reject 函数来改变 Promise 的状态。
```javascript
function MyPromise(executor) {
let status = PENDING;
function resolve(value) {
status = FULFILLED;
// TODO: 处理 value
}
function reject(reason) {
status = REJECTED;
// TODO: 处理 reason
}
// 执行异步操作
executor(resolve, reject);
}
```
现在我们已经可以创建一个 Promise 了,但是它并没有什么用处。我们需要实现一个 then 方法,它接受两个参数,一个是成功时的回调函数,一个是失败时的回调函数。当 Promise 的状态为 fulfilled 时,调用成功回调函数,否则调用失败回调函数。如果 then 方法被重复调用,我们需要将回调函数保存起来,等到异步操作完成后再执行。
```javascript
function MyPromise(executor) {
let status = PENDING;
let onFulfilledCallbacks = [];
let onRejectedCallbacks = [];
function resolve(value) {
status = FULFILLED;
onFulfilledCallbacks.forEach(callback => callback(value));
}
function reject(reason) {
status = REJECTED;
onRejectedCallbacks.forEach(callback => callback(reason));
}
function then(onFulfilled, onRejected) {
if (status === FULFILLED) {
onFulfilled(value);
} else if (status === REJECTED) {
onRejected(reason);
} else {
onFulfilledCallbacks.push(onFulfilled);
onRejectedCallbacks.push(onRejected);
}
}
// 执行异步操作
executor(resolve, reject);
return {
then,
};
}
```
最后,我们需要实现 resolve 和 reject 方法,它们分别将 Promise 的状态改为 fulfilled 和 rejected,并将结果传递给 then 方法注册的回调函数。
```javascript
function MyPromise(executor) {
let status = PENDING;
let value;
let reason;
let onFulfilledCallbacks = [];
let onRejectedCallbacks = [];
function resolve(value) {
status = FULFILLED;
onFulfilledCallbacks.forEach(callback => callback(value));
}
function reject(reason) {
status = REJECTED;
onRejectedCallbacks.forEach(callback => callback(reason));
}
function then(onFulfilled, onRejected) {
if (status === FULFILLED) {
onFulfilled(value);
} else if (status === REJECTED) {
onRejected(reason);
} else {
onFulfilledCallbacks.push(onFulfilled);
onRejectedCallbacks.push(onRejected);
}
}
function MyPromise(resolve) {
status = FULFILLED;
value = resolve;
onFulfilledCallbacks.forEach(callback => callback(value));
}
function MyPromise(reject) {
status = REJECTED;
reason = reject;
onRejectedCallbacks.forEach(callback => callback(reason));
}
// 执行异步操作
executor(resolve, reject);
return {
then,
resolve: MyPromise,
reject: MyPromise,
};
}
```
现在我们已经实现了一个简单的 Promise,您可以使用它来处理异步操作了。需要注意的是,这个 Promise 只是一个简化版的实现,没有考虑到一些重要的细节,例如异步操作的异常情况、then 方法返回的是一个新的 Promise 等等。如果您需要在生产环境中使用 Promise,请使用原生的 Promise 或第三方库。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.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://img-home.csdnimg.cn/images/20241231045053.png)