Promise的实现原理

以下是promise的简单实现

var Deferred = function () {
  this.promise = new Promise();
};

var Promise = function () {
  this.queue = [];
  this.isPromise = true; //判断是否返回了一个promise对象
}

Promise.prototype.then = function (fulfilledHandler,errorHandler,progressHandler) {
   var handler = {};
   if(typeof fulfilledHandler === 'function'){
     handler.fulfilled = fulfilledHandler;
   }
  if(typeof errorHandler === 'function'){
    handler.error = errorHandler;
  }
  this.queue.push(handler);
  return this;
}

//生成回调函数
Deferred.prototype.callback = function () {
   var that = this;
   return function (err,file) {
     if(err){
       return that.reject(err);
     }
     that.resolve(file);
   }
}

Deferred.prototype.resolve = function (obj) {
  var promise = this.promise;
  var handler;
  while(handler = promise.queue.shift()){
     if(handler && handler.fulfilled){
       var ret = handler.fulfilled(obj);
       if(ret &&ret.isPromise){
         ret.queue = promise.queue;
         this.promise = ret;
         return ret;
       }
     }
  }
}

Deferred.prototype.reject = function (err) {
   var promise = this.promise,handler;
   while(handler = promise.queue.shift()){
     if(handler && handler.error){
       var ret = handler.error(err);
       if(ret && ret.isPromise){
         ret.queue = promise.queue;
         this.promise = ret;
         return ;
       }
     }
   }
}

这里我们以两次文件读取为例子,以验证该设计的可行性。这里假设读取第二个文件是依赖于第一个文件中的内容的,相关代码如下:

var readFile1 = function (file,encoding) {
   var deferred = new Deferred();
    fs.readFile(file,encoding,deferred.callback());
    return deferred.promise;
}

var readFile2 = function (file,encoding) {
  var deferred = new Deferred();
  fs.readFile(file,encoding,deferred.callback());
  return deferred.promise;
}

readFile1('file1.txt','utf8').then(function (file1) {
   return readFile2(file1.trim(),'utf8');
}).then(function (file2) {
   console.log(file2);
});

要让Promise支持链式执行,主要通过以下两个步骤
(1)将所有的回调都存放在队列中
(2)Promise完成时,逐个执行回调,一旦检测到返回了新的Promise对象,停止执行,然后将当前
deferred对象的Promise引用改变为新的Promise对象,并将队列中余下的回调转交给它。

这里的代码主要用于研究Promise的执行原理,在更多细节的优化方面,Q或者when等Promise库做得更好,实际应用时请采用这些成熟库。

注意:Promise.prototype.then的函数实现中return this;才实现了链式调用,this指代的是当前promise实例。

### Promise 实现原理与 JavaScript 源码解析 #### 一、Promise 的基本概念 Promise 是一种异步编程解决方案,它遵循 Promises/A+ 规范[^1]。其核心在于封装了一个可能具有延迟的结果的操作,并提供了统一的接口来处理这些操作的成功或失败。 #### 二、Promise 的状态管理 Promise 对象有三种主要的状态: - **Pending**: 初始状态,既未完成也未失败。 - **Fulfilled**: 成功状态,表示操作成功完成。 - **Rejected**: 失败状态,表示操作未能完成并抛出了错误。 一旦状态从 Pending 变更为 Fulfilled 或 Rejected,则该状态不可逆[^4]。 #### 三、Promise 的核心方法实现 以下是 Promise 的几个重要方法及其工作原理: ##### 1. `then` 方法 `then` 方法用于注册当 Promise 被解决时要执行的回调函数。它的返回值也是一个新的 Promise 实例,从而支持链式调用[^2]。 ```javascript // 示例代码展示 then 方法的工作机制 new Promise((resolve) => { resolve('你好'); }).then((res) => { console.log(res); // 输出 '你好' }); ``` ##### 2. `catch` 方法 `catch` 方法专门用来捕获 Promise 链中的异常。其实质是对 `then` 方法的一个简化版本,仅接收拒绝回调作为参数[^3]。 ```javascript // catch 方法的核心逻辑 Promise.prototype.catch = function(onRejected) { return this.then(null, onRejected); }; ``` ##### 3. `finally` 方法 无论 Promise 是否被解决或拒绝,`finally` 方法都会被执行。它是基于 `then` 方法的一种扩展,主要用于清理资源或其他无关业务逻辑的任务。 ```javascript // finally 方法模拟实现 Promise.prototype.finally = function(callback) { return this.then( (value) => Promise.resolve(callback()).then(() => value), (reason) => Promise.resolve(callback()).then(() => { throw reason }) ); }; ``` #### 四、静态方法的功能剖析 除了实例方法外,Promise 还提供了一些常用的静态方法: ##### 1. `Promise.resolve(value)` 如果传入的是一个已经存在的 Promise,则直接返回这个 Promise;如果是其他类型的值,则将其转换为已解决的 Promise。 ```javascript const resolvedValue = Promise.resolve(42).then((val) => val); // 返回值为 42 ``` ##### 2. `Promise.reject(reason)` 创建一个带有指定原因的拒绝态 Promise。 ```javascript const rejectedReason = Promise.reject(new Error('Error occurred')); rejectedReason.catch(err => console.error(err.message)); // 打印 'Error occurred' ``` ##### 3. `Promise.all(iterable)` 接受一个可迭代对象(如数组),只有所有的 Promise 都解决了才会继续往下走,否则立即进入 Reject 状态。 ```javascript Promise.all([Promise.resolve(1), Promise.resolve(2)]).then(results => console.log(results)); // 结果为 [1, 2] ``` #### 五、完整的简易版 Promise 实现 下面给出一个简单的 Promise实现,涵盖了上述提到的主要功能: ```javascript class MyPromise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { return new MyPromise((resolve, reject) => { if (this.state === 'fulfilled') { setTimeout(() => { try { resolve(onFulfilled(this.value)); } catch (err) { reject(err); } }, 0); } if (this.state === 'rejected') { setTimeout(() => { try { reject(onRejected(this.reason)); } catch (err) { reject(err); } }, 0); } }); } catch(onRejected) { return this.then(null, onRejected); } } ``` 此代码片段展示了如何手动构建一个符合 Promises/A+ 标准的基础 Promise 架构[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值