首页 > 异步编程之Promise(2)：探究原理

异步编程之Promise(2)：探究原理

异步编程系列教程：

  1. (翻译)异步编程之Promise(1)——初见魅力
  2. 异步编程之Promise(2)：探究原理
  3. 异步编程之Promise(3)：拓展进阶
  4. 异步编程之Generator(1)——领略魅力
  5. 异步编程之Generator(2)——剖析特性
  6. 异步编程之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》。

重要的话，要说三遍。

转载于:https://www.cnblogs.com/YikaJ/p/4468987.html

更多相关：

  • 禁止缩放safari浏览器--阻止双击放大--阻止双指掐捏放大-

      /*禁止缩放safari浏览器*/ var scale = {disabledSafari: function () {/* 阻止双击放大*/var lastTouchEnd = 0;document.addEventListener("touchstart", function (event) {if (event.touch...

  • $g.$utils.实用工具类

      $g.$utils = {/**舒工Ajax-lite 1.0 -- 最精简的ajax自定义访问方法*/ajax: function (o) {var p = o.post, g = o.get, d = p.data, a = p.async, J = 'json', j = p[J], s = g.success, e =...

  • Sg.js框架核心概念

      Sg.js框架核心概念： 1）所有变量、方法、类对象全部都是从属于$g主树，由$g分支出很多$g.变量名、$g.方法、$g.对象id、$g.类；2）获取控件内部属性必须使用公开的get方法获取，禁止直接用访问内部变量方式来获取控件内部变量、属性值；3）修改控件内部属性、绑定方法等都必须使用公开的set方法来操作，禁止直接用访问...

  • mui ios中form表单中点击输入框头部导航栏被推起及ios中form表单中同时存在日期选择及输入框时，日历选择页面错乱bug...

     一、ios header导航栏被推起解决方法 1 设置弹出软键盘时自动改变webview的高度 plus.webview.currentWebview().setStyle({ softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度 }); 2 增加样式 html...

  • jquery-ajax请求：超时设置，增加 loading 提升体验

    前端发送Ajax请求到服务器，服务器返回数据这一过程，因原因不同耗时长短也有差别，且这段时间内页面显示空白。如何优化这段时间内的交互体验，以及长时间内服务器仍未返回数据这一问题，是我们开发中不容忽视的重点。 常见的做法是： 1、设置超时时间，一旦时间超过设定值，便终止请求；2、页面内容加载之前，手动增加一个 loading 层。 代码...

  • 抖音的标题写什么内容_看了这篇文章，我才真正明白什么才是英语速成之路！感恩...

    英语的重要性，毋庸置疑！尤其对广大职场人士，掌握英语意味着就多了一项竞争的技能。那，对于我们成人来说，时间是最宝贵的。如何短时间内在英语方面有所突破，这是我们最关心的事情。英语学习，到底有没有捷径可以走，是否可以速成？周老师在这里明确告诉大家，英语学习，没有绝对的捷径走，但是可以少走弯路。十多年的教学经验告诉我们，成功的学习方法可以借...

  • python显示行数_在idle中如何显示行号

    展开全部 其实IDLE提供了一个显32313133353236313431303231363533e78988e69d8331333365663438示所有行和所有字符的功能。 我们打开IDLE shell或者IDLE编辑器，可以看到左下角有个Ln和Col，事实上，Ln是当前光标所在行，Col是当前光标所在列。 我们如果想得到文件代码...

  • class没有发布到tomcat_Tomcat 在 SpringBoot 中是如何启动的

    前言[1]从 Main 方法说起[2]走进 Tomcat 内部[3]总结[4]《Java 2019 超神之路》《Dubbo 实现原理与源码解析 —— 精品合集》《Spring 实现原理与源码解析 —— 精品合集》《MyBatis 实现原理与源码解析 —— 精品合集》《Spring MVC 实现原理与源码解析 —— 精品合集》《Spri...

  • 如何学习streamdecoder类_如何学习篇5：强化2种能力——2种学习模式之运动类：隐性学习...

    【本文摘要】【注】本文所述内容为学习Yjango《学习观》相关视频之后的总结，观点归Yjango所有，本文仅作为学习之用。阅读本节，会让你对英语这类运动类知识的学习豁然开朗，你会知道英语学习方面，我们的症结所在。学习英语这类运动类知识，需要把握四个原则第一，不要用主动意识。第二，关注于端对端第三，输入输出符合实际情况第四，通过多个例子...

  • 结构化场景中的RGB-D SLAM

    点云PCL免费知识星球，点云论文速读。文章：RGB-D SLAM with Structural Regularities作者：Yanyan Li , Raza Yunus , Nikolas Brasch , Nassir Navab and Federico Tombari编译：点云PCL代码：https://github.co...

  • ES6中的Promise详解

    Promise 在 JavaScript 中很早就有各种的开源实现，ES6 将其纳入了官方标准，提供了原生 api 支持，使用更加便捷。 定义 Promise 是一个对象，它用来标识 JavaScript 中异步操作的状态（pending, resolve, reject）及结果(data)。 从控制台打印出来一个Promise 对象...

  • 关于ES6中Promise的应用-顺序合并Promise，并将返回结果以数组的形式输出

    1.Promise 基础知识梳理 　　创建一个Promise实例 const promise = new Promise(function(resolve, reject) {if (success){resolve(value);} else {reject(error);} }); Promise构造函数接受一个函数作为参数...

  • 在vue中使用babel-polyfill

    在 Vue.js项目中使用Vuex，Vuex 依赖 Promise，所以如果你的浏览器没有实现 Promise (比如 IE)，那么就需要使用一个 polyfill 的库 我们可以通过babel-profill转译 1、安装 npm install --save-dev babel-polyfill 2、在main.js中引入...

©2024 11GX.COM