如何封装一个Promise
时间: 2023-10-27 15:20:24 浏览: 37
1. 创建一个函数,函数接受两个参数:resolve 和 reject。
```javascript
function myPromise(callback) {
this.thenCallbacks = [];
this.catchCallbacks = [];
function resolve(value) {
this.thenCallbacks.forEach(cb => cb(value));
}
function reject(error) {
this.catchCallbacks.forEach(cb => cb(error));
}
callback(resolve.bind(this), reject.bind(this));
}
```
2. 创建一个 then 方法,将回调函数添加到 thenCallbacks 数组中。
```javascript
myPromise.prototype.then = function(callback) {
this.thenCallbacks.push(callback);
return this;
};
```
3. 创建一个 catch 方法,将回调函数添加到 catchCallbacks 数组中。
```javascript
myPromise.prototype.catch = function(callback) {
this.catchCallbacks.push(callback);
return this;
};
```
4. 创建一个静态方法 all,接受一个 Promise 数组,并返回一个新的 Promise,当所有 Promise 都成功时,返回所有结果的数组。
```javascript
myPromise.all = function(promises) {
const results = [];
let completed = 0;
return new myPromise((resolve, reject) => {
promises.forEach((promise, index) => {
promise.then(result => {
results[index] = result;
completed++;
if (completed === promises.length) {
resolve(results);
}
}).catch(reject);
});
});
};
```
5. 创建一个静态方法 race,接受一个 Promise 数组,并返回一个新的 Promise,当有一个 Promise 成功时,返回该 Promise 的结果。
```javascript
myPromise.race = function(promises) {
return new myPromise((resolve, reject) => {
promises.forEach(promise => {
promise.then(resolve).catch(reject);
});
});
};
```
完整代码:
```javascript
function myPromise(callback) {
this.thenCallbacks = [];
this.catchCallbacks = [];
function resolve(value) {
this.thenCallbacks.forEach(cb => cb(value));
}
function reject(error) {
this.catchCallbacks.forEach(cb => cb(error));
}
callback(resolve.bind(this), reject.bind(this));
}
myPromise.prototype.then = function(callback) {
this.thenCallbacks.push(callback);
return this;
};
myPromise.prototype.catch = function(callback) {
this.catchCallbacks.push(callback);
return this;
};
myPromise.all = function(promises) {
const results = [];
let completed = 0;
return new myPromise((resolve, reject) => {
promises.forEach((promise, index) => {
promise.then(result => {
results[index] = result;
completed++;
if (completed === promises.length) {
resolve(results);
}
}).catch(reject);
});
});
};
myPromise.race = function(promises) {
return new myPromise((resolve, reject) => {
promises.forEach(promise => {
promise.then(resolve).catch(reject);
});
});
};
```