promise的模拟设计与实现
时间: 2023-08-13 19:06:01 浏览: 49
Promise是一种异步编程的解决方案,可以避免回调地狱现象。在JavaScript中,Promise通常被用于处理异步操作,比如网络请求等。下面是一个简单的Promise模拟设计与实现:
```javascript
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = undefined;
this.reason = undefined;
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onFulfilledCallbacks.forEach((callback) => callback());
}
};
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
this.onRejectedCallbacks.forEach((callback) => callback());
}
};
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
then(onFulfilled, onRejected) {
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason };
const promise2 = new MyPromise((resolve, reject) => {
if (this.state === 'fulfilled') {
setTimeout(() => {
try {
const x = onFulfilled(this.value);
this.resolvePromise(promise2, x, resolve, reject);
} catch (error) {
reject(error);
}
}, 0);
} else if (this.state === 'rejected') {
setTimeout(() => {
try {
const x = onRejected(this.reason);
this.resolvePromise(promise2, x, resolve, reject);
} catch (error) {
reject(error);
}
}, 0);
} else if (this.state === 'pending') {
this.onFulfilledCallbacks.push(() => {
setTimeout(() => {
try {
const x = onFulfilled(this.value);
this.resolvePromise(promise2, x, resolve, reject);
} catch (error) {
reject(error);
}
}, 0);
});
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
const x = onRejected(this.reason);
this.resolvePromise(promise2, x, resolve, reject);
} catch (error) {
reject(error);
}
}, 0);
});
}
});
return promise2;
}
resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
reject(new TypeError('Chaining cycle detected'));
}
if (x instanceof MyPromise) {
x.then((value) => {
this.resolvePromise(promise2, value, resolve, reject);
}, reject);
} else {
resolve(x);
}
}
catch(onRejected) {
return this.then(null, onRejected);
}
static resolve(value) {
return new MyPromise((resolve) => {
resolve(value);
});
}
static reject(reason) {
return new MyPromise((resolve, reject) => {
reject(reason);
});
}
static all(promiseList) {
return new MyPromise((resolve, reject) => {
const result = [];
let count = 0;
promiseList.forEach((promise, index) => {
promise.then((value) => {
result[index] = value;
count++;
if (count === promiseList.length) {
resolve(result);
}
}, reject);
});
});
}
static race(promiseList) {
return new MyPromise((resolve, reject) => {
promiseList.forEach((promise) => {
promise.then(resolve, reject);
});
});
}
}
```
这里实现了一个简单的Promise,包括构造函数、then方法、resolvePromise方法、catch方法、静态方法resolve、静态方法reject、静态方法all和静态方法race。当使用then方法时,我们可以传入一个onFulfilled回调函数和一个onRejected回调函数,用于处理Promise的状态。当调用resolve方法时,会将Promise的状态改为fulfilled,并将value值保存起来,同时执行所有的onFulfilled回调函数。当调用reject方法时,会将Promise的状态改为rejected,并将reason值保存起来,同时执行所有的onRejected回调函数。在resolvePromise方法中,我们判断x的值,如果是一个Promise,则递归调用resolvePromise方法,直到x的值不是一个Promise为止。在catch方法中,我们可以直接调用then方法,传入null作为onFulfilled回调函数,然后传入一个onRejected回调函数。在静态方法resolve和reject中,我们直接返回一个新的Promise,并在构造函数中调用resolve或reject方法。在静态方法all中,我们传入一个Promise数组,然后返回一个新的Promise,当所有的Promise都变成fulfilled状态时,我们将所有的value值保存到result数组中,并执行resolve方法。在静态方法race中,我们传入一个Promise数组,然后返回一个新的Promise,当有一个Promise变成fulfilled或rejected状态时,我们就执行resolve或reject方法。