实现一个Promise

class Promise{
constructor (fn){
const _this = this;
//声明一个等待的队列(重点)
this._queue = [];
this._succ_res = null;
this._error_res = null;
this.status = "";
fn(function(...arg){
_this._succ_res = arg;
_this.status = "success";
_this._queue.forEach(json => {
json.fn1(...arg);
});
},function(...arg){
_this._error_res = arg;
_this.status = "error";
_this._queue.forEach(json => {
json.fn2(...arg);
})
})
}
then(fn1, fn2){
if(this.status == "success"){
fn1(this._succ_res);
} else if(this.status == "error") {
fn2(this._error_res);
} else {
this._queue.push({fn1, fn2});
}
}
}

Promise.all = function (arr){
let resArr = [];
return new Promise((resovle, reject) => {
let i =0;
next();
function next(){
arr[i].then(res =>{
resArr.push(res);

i++
if(i == res.length) {
resolve(resArr);
} else {
next();
}
}, error =>{
reject(error);
})
}
})
}
<think>我们来实现一个简单的Promise,遵循Promise/A+规范的核心部分。由于完整实现较为复杂,这里我们实现一个简化版,包含基本功能:状态管理、then方法、异步执行支持。 核心要点: 1. Promise有三种状态:pending, fulfilled, rejected 2. 初始化时传入一个执行器函数(executor),该函数立即执行,接收两个参数:resolve和reject 3. then方法用于注册回调,当状态改变时调用对应的回调 4. 支持异步:当状态还未改变时,将回调暂存,待状态改变后执行 我们将按照以下步骤实现: 1. 定义状态常量 2. 构造函数:初始化状态、值、原因以及回调队列 3. 实现resolve和reject内部函数 4. 实现then方法 5. 处理executor中的异常 注意:此实现不包含链式调用(即then返回新的Promise)和值穿透等高级特性,仅提供基本功能。 代码实现:</think>### 简单实现一个 Promise #### 基础版 Promise 实现(符合 Promise/A+ 规范核心部分) ```javascript class MyPromise { constructor(executor) { this.state = 'pending'; // 状态: pending, fulfilled, rejected this.value = null; // 成功时的值 this.reason = null; // 失败时的原因 this.onFulfilledCallbacks = []; // 成功回调队列 this.onRejectedCallbacks = []; // 失败回调队列 const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; // 执行所有成功回调 this.onFulfilledCallbacks.forEach(fn => fn()); } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; // 执行所有失败回调 this.onRejectedCallbacks.forEach(fn => fn()); } }; 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; }; // 返回新Promise实现链式调用 return new MyPromise((resolve, reject) => { const handleFulfilled = () => { try { const result = onFulfilled(this.value); resolve(result); } catch (error) { reject(error); } }; const handleRejected = () => { try { const result = onRejected(this.reason); resolve(result); } catch (error) { reject(error); } }; if (this.state === 'fulfilled') { // 异步执行 setTimeout(handleFulfilled, 0); } else if (this.state === 'rejected') { setTimeout(handleRejected, 0); } else { // pending状态 this.onFulfilledCallbacks.push(() => setTimeout(handleFulfilled, 0)); this.onRejectedCallbacks.push(() => setTimeout(handleRejected, 0)); } }); } // 简单实现catch方法 catch(onRejected) { return this.then(null, onRejected); } // 简单实现finally方法 finally(callback) { return this.then( value => MyPromise.resolve(callback()).then(() => value), reason => MyPromise.resolve(callback()).then(() => { throw reason; }) ); } // 静态resolve方法 static resolve(value) { if (value instanceof MyPromise) return value; return new MyPromise(resolve => resolve(value)); } // 静态reject方法 static reject(reason) { return new MyPromise((_, reject) => reject(reason)); } } ``` #### 使用示例 ```javascript // 基本使用 const p1 = new MyPromise((resolve, reject) => { setTimeout(() => resolve('成功!'), 1000); }); p1.then(result => { console.log(result); // 1秒后输出"成功!" return '链式调用'; }).then(msg => { console.log(msg); // 输出"链式调用" }); // 错误处理 const p2 = new MyPromise((resolve, reject) => { reject(new Error('出错了!')); }); p2.catch(error => { console.error(error.message); // 输出"出错了!" }); // 静态方法 MyPromise.resolve('立即解析') .then(console.log); // 输出"立即解析" MyPromise.reject('立即拒绝') .catch(console.error); // 输出"立即拒绝" ``` #### 实现要点解析 1. **状态机设计** - 三种状态:`pending`、`fulfilled`、`rejected` - 状态单向转换:`pending` → `fulfilled` 或 `pending` → `rejected` 2. **异步处理** - 使用 `setTimeout` 确保回调异步执行 - 回调队列处理异步操作完成前的多次 `then` 调用 3. **链式调用** - `then` 方法返回新 Promise 对象 - 值穿透处理:`then(null, ...)` 和 `catch` 实现 4. **错误处理** - 执行器函数错误捕获 - 回调函数错误传播 #### 与原生 Promise 的差异 | 特性 | 原生 Promise | 本实现 | |--------------------|----------------------|---------------------| | 微任务队列 | 使用微任务 | 使用宏任务(setTimeout) | | Promise.all | 支持 | 未实现 | | Promise.race | 支持 | 未实现 | | 性能优化 | 高度优化 | 基础实现 | | 规范符合度 | 完整 Promise/A+ | 核心部分 | #### 进阶扩展建议 1. **实现 Promise.all** ```javascript static all(promises) { return new MyPromise((resolve, reject) => { const results = []; let completed = 0; promises.forEach((promise, index) => { MyPromise.resolve(promise).then( value => { results[index] = value; if (++completed === promises.length) resolve(results); }, reject // 任一失败立即reject ); }); }); } ``` 2. **实现 Promise.race** ```javascript static race(promises) { return new MyPromise((resolve, reject) => { promises.forEach(promise => { MyPromise.resolve(promise).then(resolve, reject); }); }); } ``` 3. **添加取消功能** ```javascript constructor(executor) { // ...其他代码... this.isCancelled = false; const cancel = () => { this.isCancelled = true; reject(new Error('Promise cancelled')); }; executor(resolve, reject, cancel); // 添加取消函数 } // 使用 const p = new MyPromise((resolve, reject, cancel) => { // 设置取消函数 window.cancelRequest = cancel; }); ``` #### 应用场景 1. **API请求封装** ```javascript function fetchData(url) { return new MyPromise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = () => resolve(JSON.parse(xhr.responseText)); xhr.onerror = () => reject(new Error('Request failed')); xhr.send(); }); } ``` 2. **异步流程控制** ```javascript MyPromise.resolve() .then(() => loadUserData()) .then(user => loadOrders(user.id)) .then(orders => processOrders(orders)) .catch(handleError); ``` 3. **超时控制** ```javascript function withTimeout(promise, timeout) { return MyPromise.race([ promise, new MyPromise((_, reject) => setTimeout(() => reject(new Error('Timeout')), timeout) ) ]); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值