js 实现一个简单的 Promise 构造函数
时间: 2024-08-10 14:01:25 浏览: 28
JavaScript 中的 `Promise` 对象是用来处理异步操作的一种数据结构。它表示了一个尚未完成的任务,并允诺在将来提供一个结果。Promise 可以处于三种状态之一:pending(待定)、fulfilled(已完成,成功) 或 rejected(已完成,失败)。在实际应用中,通常会通过 `then` 和 `catch` 方法来链式处理这些状态变化。
### 创建简单的 Promise 构造函数
下面是一个基础的 `Promise` 的实现示例:
```javascript
function simplePromise(value) {
return new Promise(function(resolve, reject) {
// 根据值判断是否是已经成功的状态
if (value === true) {
resolve("任务成功!");
} else {
reject("任务失败!");
}
});
}
```
在这个简单的 `simplePromise` 函数里,我们创建了一个 `Promise` 对象并传入了两个回调函数作为参数:`resolve` 和 `reject`。这两个函数分别用于处理 `fulfilled` 状态和 `rejected` 状态。
### 使用简单 `Promise` 实现的功能
一旦我们有了这个构造函数,就可以使用它来包装异步操作。例如:
```javascript
simplePromise(true)
.then(result => console.log(result))
.catch(error => console.error(error));
```
上述代码将首先尝试执行 `simplePromise(true)`,由于给定的 `true` 表示成功,因此会进入 `.then` 方法并打印出 "任务成功!” 到控制台。如果在实现中使用了 `false` 或其他导致错误的情况,则会触发 `.catch` 方法并打印错误信息。
### 扩展功能
为了更完整地体现 `Promise` 的功能,可以进一步增加返回结果、处理多个状态等特性。比如添加返回值的能力以及 `finally` 方法供清理操作使用:
```javascript
class SimplePromise {
constructor(executor) {
this.resolve = null;
this.reject = null;
this.state = 'pending';
this.value = null;
const resolveReject = (state, value) => {
if (this.state === 'pending') {
this.state = state;
this.value = value;
if (this.resolve && this.reject) {
this.resolve(this.value);
this.reject = undefined;
this.resolve = undefined;
}
}
};
try {
executor(resolveReject);
} catch(e) {
resolveReject('rejected', e);
}
}
then(onFulfilled, onRejected) {
return new SimplePromise((resolve, reject) => {
this.resolve = (result) => {
try {
let x = onFulfilled ? onFulfilled(result) : result;
if (x instanceof SimplePromise) {
x.then(resolve, reject);
} else {
resolve(x);
}
} catch(e) {
reject(e);
}
};
this.reject = error => {
try {
let x = onRejected ? onRejected(error) : error;
if (x instanceof SimplePromise) {
x.then(resolve, reject);
} else {
reject(x);
}
} catch(e) {
reject(e);
}
};
});
}
catch(rejectHandler) {
return this.then(null, rejectHandler);
}
finally(callback) {
let promise = this;
return this.then(() => callback(), () => callback());
}
}
// 使用新的 Promise 类
new SimplePromise((resolve, reject) => {
setTimeout(() => resolve('Hello'), 500);
}).then(result => console.log(result)).catch(err => console.error(err));
```
在这个版本中,我们引入了类封装来简化 API 和增强功能,如允许返回值、链式调用 `then` 方法和通过 `finally` 完成清理操作。
---
### 相关问题 - JavaScript Promise 的基本概念:
1. **Promise 的状态是什么?** 分别解释它们的意义及如何从 `pending` 转变到其他状态。
2. **简述 `.then()` 和 `.catch()` 方法的作用以及区别。**
3. **在什么情况下使用 `.finally()` 方法?给出一个场景说明它的用途。**
通过这些问题,你可以更深入地理解 Promise 结构和其在 JavaScript 异步编程中的作用。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)