异步编程之Promise(2):探究原理
异步编程系列教程:
- (翻译)异步编程之Promise(1)——初见魅力
- 异步编程之Promise(2):探究原理
- 异步编程之Promise(3):拓展进阶
- 异步编程之Generator(1)——领略魅力
- 异步编程之Generator(2)——剖析特性
- 异步编程之co——源码分析
动手实现Promise
在异步编程之Promise(1)里,我是翻译了一篇文章,里面是探究promise的模式和领略它的魅力。我们可以利用promise,缓解回调函数给我们带来的回调金字塔。使用链式结构书写,使代码更加简洁易懂,易于控制。但是对于构造promise和其内部的实现,却用草草的一句new Promise()
就带过。这一次,借着阅读朴灵大神的《深入浅出Node.Js》,我们自己动手实现一个小小的基本的promise吧。
构建Promise对象
首先我们需要回顾一下,一个Promise/A模式和API上是如何定义的:
- Promise分别有三个状态:pending初始状态,fulfilled完成状态,rejected失败状态。
- 一旦promise是fulfilled状态或rejected状态,那么它就是不会再改变的。
- 具备
then()
方法,用于接收fulfilled和rejected状态的回调方法,并在相应状态下进行触发。 then()
方法只允许接受function对象,其余的会被忽略。then()
方法会返回Promise对象,提供链式调用。then()
方法可接收第三个方法,用于支持progress事件的回调方法。
知道我们的Promise对象需要有什么之后,我们就可以开始尝试写Promise的构造函数了。还有Promise是基于事件机制的,也可以说是发布/订阅模式。所以我们为了演示方便,将使用Node里的events模块。
还不清楚自定义事件的同学,推荐一个视频给你们入门:阿当大话西游之WEB组件
var events = require('events'); //events模块
var util = require('util'); //util工具包模块
var MyPromise = function(){
events.EventEmitter.call(this);
};
util.inherits(MyPromise, events.EventEmitter); // 继承
MyPromise.prototype.then = function(resolve, reject, progress){
// this.once()是绑定事件被触发后立即移除事件
if(typeof resolve === 'function'){
this.once('success', resolve);
}
if(typeof reject === 'function'){
this.once('error', reject);
}
if(typeof progress === 'function'){
// 不需要once()
this.on('progress', progress);
}
return this;
};
由此,我们就实现了Promise/A规范。我们用promise对象的then,用相应的事件存放了各个状态的回调函数。那接下来,我们就要知道如何触发这些事件。
构建Deferred对象
为了实现事件的触发,我们需要有一个新的对象Deferred。意思是,延迟对象。
var Deferred = function(){
this.state = 'pending';
this.promise = new MyPromise();
};
Deferred.prototype.resolve = function(obj){
this.state = 'fulfilled';
this.promise.emit('success', obj);
};
Deferred.prototype.reject = function(err){
this.state = 'failed';
this.promise.emit('error', err);
};
Deferred.prototype.progress = function(data){
this.promise.emit('progress', data);
};
我们可以看到,我们之前定义的promise成为了deferred对象中的一个属性。然后Deferred对象的方法,都是用来触发事件来改变promise状态的。这种模式也称作Promise/Deffered模式
,它是基于发布与订阅模式,并提供了更加高级的抽象。Deferred对象,用来控制Promise内部,维护Promise状态。Promise对象,则是作用于外部,通过then(resolve, reject)
对外提供接口。
对于上一篇讲到的promise化的readJSON,我们可以使用我们定义的Promise/Deferred重写一遍:
var readJSON = function(filename, encoding){
var deferred = new Deferred();
fs.readFile(filename, encoding, function(err, res){
if(err)
return deferred.reject(err);
deferred.resolve(JSON.parse(res));
});
return deferred.promise;
};
// 应用
readJSON('data.json', 'utf-8').then(function(res){
console.log(res.message); // Hello World!
})
对我来说,我更喜欢Promise/Deferred的实现。因为通过Deferred对象,我们可以很随心的控制promise的状态,得到我们想要的样子。当然喜欢原生ES6的那种为Promise构造函数传入工厂函数,也是可以自己改造一下的,和回调参数差不多,可以自行尝试一下。不知道是不是应为我个人水平问题,写起来觉得乱糟糟。所以我更喜欢Promise/Deferred模式的实现。代码如下:
// 去掉Deferred对象,直接通过回调参数来确定是resolve还是reject。
var MyPromise = function(factory){
events.EventEmitter.call(this);
var _this = this;
factory && factory(function(res){
console.log(res);
_this.emit('success', res);
}, function(err){
_this.emit('error', err);
});
};
util.inherits(MyPromise, events.EventEmitter);
// 模拟ES6构造函数方法的应用
var readJSON = function(filename, encoding){
return new MyPromise(function(resolve, reject){
fs.readFile(filename, encoding, function(err, res){
if(err)
return reject(err);
resolve(JSON.parse(res));
});
});
};
readJSON("data.json", 'utf-8').then(function(data){
console.log(data.message); // Hello World!
});
我们通过把json解析后传到resolve()
中实现了我们上一篇的readJSON函数promise化的要求!酷~
开始使用Promise
从这两篇promise的探究路上,如果能体会到其中的奥妙,应该也差不多可以上道了。这个时候在ES6还未普及前,实现完整优秀promise模式可以借助一些promise库。这里我推荐 Q.js,为了能体现它的高效和优雅,我们借助以往的readJSON
例子。
var Q = require('q');
var fs = require('fs');
var readFile = function(filename, encoding){
var deferred = new Q.defer(); // 获取Q的deferred对象
fs.readFile(filename, encoding, function(err, res){
if(err)
return deferred.reject(err);
deferred.resolve(res);
});
return deferred.promise; // 将promise对象return出去,实现链式调用
};
var readJSON = function(filename, encoding){
return readFile(filename, encoding).then(JSON.parse);
};
readJSON('data.json', 'utf-8').then(function(data){
console.log(data.message); //Hello World!
});
这里并没有体现优雅,但是可以看到promise/deferred模式
的使用。特别是和我一样喜欢这种模式的同学,简直不能再爽!当然,说到优雅,我们可以回想一下,每次我们处理fs.readFile()
的callback
时,我们都是重复的有错误就reject,没错误就resolve。同样的逻辑,其实我们是可以封装起来的,Q就帮我们做到了这一点。
// 改变fs.readFile()
var readFile = function(filename, encoding){
var deferred = new Q.defer(); // 获取Q的deferred对象
fs.readFile(filename, encoding, deferred.makeNodeResolver());
return deferred.promise; // 将promise对象return出去,实现链式调用
};
语意可得,弄一个Node式的回调。这个实现其实很简单,书上也有说。这个就交给各位同学们,自己动手试一试吧~
接下来,会针对我们自己实现的Promise进行拓展,完成我们更多的需求。在此过程中,探究Promise实现原理。为接下来的异步编程学习打下基础。
再次感谢朴灵老师的《深入浅出Node.Js》。
再次感谢朴灵老师的《深入浅出Node.Js》。
再次感谢朴灵老师的《深入浅出Node.Js》。
重要的话,要说三遍。
异步编程之Promise(2):探究原理的更多相关文章
- 异步编程之Promise(3):拓展进阶
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- (翻译)异步编程之Promise(1):初见魅力
原文:https://www.promisejs.org/ by Forbes Lindesay 异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2) ...
- ECMA Script 6_异步编程之 Promise
Promise 对象 异步编程 方案,已同步的方式表达异步的代码,解决回调地狱的问题 比传统的解决方案——回调函数和事件——更合理和更强大 是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步 ...
- 前端异步编程之Promise和async的用法
传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案: ES6的新语法Promise ES2017引入的async函数 Generator函数(略) Promise的含义 ...
- JavaScript的异步编程之Promise
Promise 一种更优的异步编程统一 方法,如果直接使用传统的回调函数去完成复杂操作就会形成回调深渊 // 回调深渊 $.get('/url1'() => { $.get('/url2'() ...
- 异步编程之Generator(1)——领略魅力
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- 异步编程之co——源码分析
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- 异步编程之Generator(2)——剖析特性
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- Javascript异步编程之setTimeout与setInterval详解分析(一)
Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...
随机推荐
- 1427. SMS(DP)
1427 题意不太好理解 其它没什么 细心啊 细心 一个0写成了1 WA半天 以每个字符是以第一种方式还是第二种方式来D #include <iostream> #include<c ...
- 【Todo】深入PHP内核系列
看到一个<深入PHP内核>系列,Todo: http://www.csdn.net/article/2014-09-15/2821685-exploring-of-the-php [问底] ...
- ionic中极光推送的集成
1.到极光官网注册账号,新建应用获得appkey. 详见:https://www.jiguang.cn/app/list 2.引入jpush插件 详见:https://github.com/jpush ...
- HDU 2553 (状压) N皇后问题 (2)
也许大多数做法都是打表,但这里用位运算的思想来解决这个问题,位运算果然强大,Orz 原文地址,感觉讲的很明白了: http://www.cnblogs.com/gj-Acit/archive/2013 ...
- UVa 10048 Audiophobia【Floyd】
题意:给出一个c个点,s条边组成的无向图,求一点到另一点的路径上最大权值最小的路径,输出这个值 可以将这个 d[i][j]=min(d[i][j],d[i][k]+d[k][j]) 改成 d[i][j ...
- postgresql大批量数据导入方法
一直没有好好关注这个功能,昨天看了一下,数据库插入有瓶颈,今天研究了一下: 主要有以下方案: 1.使用copy从文件导入: copy table_001(a, b, "f", d, ...
- scala学习笔记(7):函数(1)
函数是Scala的第一公民! 1 基本定义 scala> def max(x: Int, y: Int): Int = { if (x > y) x else y } 跟着是括号里带有冒 ...
- UML时序图
时序图定义 : 描述了对象之间传递消息的时间顺序, 用来表示用例中的行为顺序, 是强调消息时间顺序的交互图; 时序图描述的事物: 时序图描述系统中类和类之间的交互, 将这些交互建模成消息交换, 时序图 ...
- Struts2配置之Struts.properties
Struts 2框架有两个核心配置文件,其中struts.xml文件主要负责管理应用中的Action映射,以及该Action包含的Result定义等.除此之 外,Struts 2框架还包含 s ...
- android 横竖屏限制如何配置
在开发android的应用中,有时候需要限制横竖屏切换.只需要在AndroidManifest.xml文件中加入android:screenOrientation属性限制. ndroid:screen ...