手写promise,promise.all()
时间: 2025-01-02 20:39:53 浏览: 50
手写Promise通常是为了深入理解其工作原理以及在某些特定场景下进行自定义控制。Promise是一个表示异步操作最终完成(成功或失败)的对象。它有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。手写Promise的基本结构如下:
```javascript
function customPromise(executor) {
const promise = {
state: 'pending',
value: null,
reason: null,
then(onFulfilled, onRejected),
catch(onRejected)
};
function resolve(value) {
if (promise.state !== 'pending') return;
promise.state = 'fulfilled';
promise.value = value;
// 如果有onFulfilled函数,调用并更新状态
if (typeof onFulfilled === 'function') onFulfilled(promise.value);
}
function reject(reason) {
if (promise.state !== 'pending') return;
promise.state = 'rejected';
promise.reason = reason;
// 如果有onRejected函数,调用并更新状态
if (typeof onRejected === 'function') onRejected(promise.reason);
}
executor(resolve, reject);
return promise;
}
// 使用示例
customPromise((resolve, reject) => {
setTimeout(() => resolve('Hello'), 1000);
}).then(val => console.log(val)); // 输出 'Hello' after 1 second
```
`Promise.all()`则是Promise的一个静态方法,接收一个Promise数组作为参数,返回一个新的Promise,当所有传入的Promise都解析完毕后,结果会是一个包含每个Promise结果的数组。如果任一Promise被拒绝,返回的结果就会变为那个拒绝的Promise。
```javascript
function all(promises) {
return new Promise((resolve, reject) => {
let counter = promises.length;
const results = [];
if (!counter) {
resolve(results);
return;
}
promises.forEach((promise, index) => {
promise.then(result => {
results[index] = result;
counter--;
if (!counter) resolve(results);
}).catch(err => {
reject(err);
if (!counter) reject(err); // 如果所有Promise都拒绝,则立即结束
});
});
});
}
const promises = [customPromise(...), customPromise(...)];
all(promises).then(values => console.log(values));
```
阅读全文
相关推荐











