原文:https://www.promisejs.org/

by Forbes Lindesay

异步编程系列教程:

  1. (翻译)异步编程之Promise(1)——初见魅力
  2. 异步编程之Promise(2):探究原理
  3. 异步编程之Promise(3):拓展进阶
  4. 异步编程之Generator(1)——领略魅力
  5. 异步编程之Generator(2)——剖析特性
  6. 异步编程之co——源码分析

动机


思考一下,下面这段用来读取文件并解析JSON的Javascript同步代码。它很简单并且易于阅读,但是因为它会阻塞代码,你并不会想用在大多数的应用里。这意味着,当你用它来读取文件的时候(它需要很多时间)不会有其他的事情发生。

  1. function readJSONSync(filename){
  2. // 读取文件后,再解析成JSON
  3. return JSON.parse(fs.readFileSync(filename, 'utf-8'));
  4. }

为了让我们的应用高性能且实时响应,我们需要让所有涉及到IO的操作都变成异步的。最简单的方法去实现它就是使用callback回调。然而,一个幼稚不成熟的代码实现也许会让它出错。

  1. function readJSON(filename, callback){
  2. fs.readFile(filename, 'utf-8', function(err, res){
  3. if(err)
  4. return callback(err);
  5. // 回调参数为,错误null和文件解析后的JSON
  6. callback && callback(null, JSON.parse(res));
  7. })
  8. }

出现的问题:

  • 额外的callback回调参数会使我们困惑,不知道变量到底是输入值还是返回值。
  • It doesn't work at all with control flow primitives.(这里我无法理解控制什么流呢?)
  • 无法处理由JSON.parse抛出的错误。

我们需要处理由JSON.parse抛出的错误,但是我们同样也需要小心不要影响到了由callback函数抛出的错误。最后我们用一堆混乱的错误处理完成了:

  1. function readJSON(filename, callback){
  2. fs.readFile(filename, 'utf-8', function(err, res){
  3. if(err)
  4. return callback(err);
  5. try{
  6. res = JSON.parse(res);
  7. } catch(ex){
  8. return callback(ex);
  9. }
  10. callback(null, res);
  11. });
  12. }

尽管有这些杂乱代码来处理错误,我们仍然留下一个问题就是callback烦人的回调参数。Promise可以帮助你更自然的处理错误,没有callback的参数使代码更简洁,并且用不着修改底层的结构(意思是你可以用原生Js来实现promise,并且用它来封装已经存在的异步操作)

什么是promise?


promise背后的核心思想就是,一个promise代表了一个异步操作的结果。一个promise只有三种不同的形态:

  • pending - 等待,是promise的初始状态
  • fulfilled - 完成,这个promise状态代表着操作成功(有的也称resolve解决)
  • rejected - 拒绝,这个promise状态代表了操作失败

一旦promise是fulfilled状态或rejected状态,那么它就是固定不会再改变的了。

构建一个promise


当以后所有的APIs都转变成promises,你应该会特别少机会去手动构建promise。在此期间,我们需要一个方法来转变现有的APIs。举个栗子:

  1. function readFile(filename, encoding){
  2. return new Promise(function(resolve, reject){
  3. fs.readFile(filename, encoding, function(err, res){
  4. if(err)
  5. return reject(err);
  6. resolve(res);
  7. });
  8. });
  9. }

我们使用ES6的new Promise来构建promise。我们给构造器一个生成promise的工厂函数。这个带两个参数的函数会立即调用。第一个参数用来使promise转变成成功状态,第二个参数使promise转变成失败状态。一旦操作完成后,我们将会调用相应合适的函数。

等待一个promise


为了使用promise,我们必须用某种方法去等待promise的状态是成功了还是失败了。这个方法在promise/A里,就是使用promise.then(resolve, reject)promise.then()会返回promise以提供链式调用。

根据这个,我们可以利用promise轻松的重写之前的readJSON函数:

  1. function readJSON(filename, encoding){
  2. return new Promise(function(resolve, reject){
  3. readFile(filename, encoding).then(function(res){
  4. try{
  5. resolve(JSON.parse(res));
  6. }catch(ex){
  7. reject(ex);
  8. }
  9. }, reject);
  10. });
  11. }

这次,我们是把readJSON转化成新的promise返回出来,提供接下来的使用。

变化/链式结构


通过我们的例子,我们真正希望做到的是让另外的操作也变成promise化。在我们的例子中,第二个操作是同步的(指JSON.parse()),但是readJSON已经简单的转变成一个异步的操作。幸运的是,promise的then()方法可以将其变成链式操作。

现在我们可以更简洁地重写我们原本的例子:

  1. function readJSON(filename, encoding){
  2. return readFile(filename, encoding).then(function(res){
  3. return JSON.parse(res);
  4. });
  5. }

因为JSON.parse仅仅是个函数,我们可以重写成这样:

  1. function readJSON(filename, encoding){
  2. return readFile(filename, encoding).then(JSON.parse);
  3. }

这和我们一开始写的最简单的同步代码已经非常相似了!我认为用链式结构调用,会更符合自然逻辑。

最后实现的代码如下所示:

  1. //data.json文件
  2. //{"message": "Hello World!"}
  3. //readFile的Promise化
  4. function readFile(filename, encoding){
  5. return new Promise(function(resolve, reject){
  6. fs.readFile(filename, encoding, function(err, res){
  7. if(err)
  8. return reject(err);
  9. resolve(res);
  10. });
  11. });
  12. }
  13. //readJSON的Promise化
  14. function readJSON(filename, encoding){
  15. return readFile(filename, encoding).then(JSON.parse);
  16. }
  17. // readJSON函数的使用
  18. readJSON("data.json", 'utf-8').then(function(data){
  19. console.log(data.message); // Hello World!
  20. });

我们可以看到臃肿混乱的回调金字塔已经消失了,剩下的是清爽干净的链式promise。而错误,我们也可以很轻松的进行捕捉处理。

(翻译)异步编程之Promise(1):初见魅力的更多相关文章

  1. 异步编程之Generator(1)——领略魅力

    异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...

  2. 异步编程之Promise(3):拓展进阶

    异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...

  3. 异步编程之Promise(2):探究原理

    异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...

  4. ECMA Script 6_异步编程之 Promise

    Promise 对象 异步编程 方案,已同步的方式表达异步的代码,解决回调地狱的问题 比传统的解决方案——回调函数和事件——更合理和更强大 是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步 ...

  5. 前端异步编程之Promise和async的用法

    传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案: ES6的新语法Promise ES2017引入的async函数 Generator函数(略) Promise的含义 ...

  6. JavaScript的异步编程之Promise

    Promise 一种更优的异步编程统一 方法,如果直接使用传统的回调函数去完成复杂操作就会形成回调深渊 // 回调深渊 $.get('/url1'() => { $.get('/url2'() ...

  7. 异步编程之co——源码分析

    异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...

  8. 异步编程之Generator(2)——剖析特性

    异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...

  9. Javascript异步编程之setTimeout与setInterval详解分析(一)

    Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...

随机推荐

  1. spring mvc出现 Failed to convert property value of type 'java.lang.String' to required type 'java.util.Date' for property 'endtime'

    在使用spring mvc中,绑定页面传递时间字符串数据给Date类型是出错: Failed to convert property value of type [java.lang.String] ...

  2. 查看mysql存储引擎

    一般情况下,mysql会默认提供多种存储引擎,你可以通过下面的查看: 看你的mysql现在已提供什么存储引擎:mysql> show engines; 看你的mysql当前默认的存储引擎:mys ...

  3. 51nod1437 迈克步

    傻叉单调栈 #include<cstdio> #include<cstring> #include<cctype> #include<algorithm> ...

  4. 基于Flume的美团日志收集系统(二)改进和优化

    在<基于Flume的美团日志收集系统(一)架构和设计>中,我们详述了基于Flume的美团日志收集系统的架构设计,以及为什么做这样的设计.在本节中,我们将会讲述在实际部署和使用过程中遇到的问 ...

  5. 批量生成sqlldr文件,高速卸载数据

    SQL*Loader 是用于将外部数据进行批量高速加载的数据库的最高效工具,可用于将多种平面格式文件加载到Oracle数据库.SQL*Loader支持传统路径模式以及直接路径这两种加载模式.关于SQL ...

  6. php curl简单使用

    使用PHP的cURL库可以简单和有效地去抓网页,您只需要运行一个脚本,然后分析一下您所抓取的网页,然后就可以以程序的方式得到您想要的数据了.无论是您想从一个链接上取部分数据,或是取一个XML文件并把其 ...

  7. myeclipse svn配置

    在MyEclipse 9.0中安装SVN插件遇到一些问题,参考网上一些方法,最终解决.以下是个人认为比较简易的方法,供参考: 安装过程: (1)svn的插件版本site-1.8.14.zip(可根据自 ...

  8. 可以用google了

    半年都上不了google,现在可以了, 哈哈,支持自动更新, 有时候用google还是很不错的,尤其是英文搜索.

  9. ERROR:The requested URL could not be retrieved解决方法

    ERROR 错误 The requested URL could not be retrieved 您所请求的网址(URL)无法获取 While trying to retrieve the URL: ...

  10. Android中垃圾回收日志信息

    原因 GC_CONCURRENTfreed 178K, 41% free 3673K/6151K, external 0K/0K, paused 2ms+2msGC_EXPLICITfreed 6K, ...