原文: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同步代码。它很简单并且易于阅读,但是因为它会阻塞代码,你并不会想用在大多数的应用里。这意味着,当你用它来读取文件的时候(它需要很多时间)不会有其他的事情发生。

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

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

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

出现的问题:

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

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

function readJSON(filename, callback){
fs.readFile(filename, 'utf-8', function(err, res){
if(err)
return callback(err);
try{
res = JSON.parse(res);
} catch(ex){
return callback(ex);
}
callback(null, res);
});
}

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

什么是promise?


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

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

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

构建一个promise


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

function readFile(filename, encoding){
return new Promise(function(resolve, reject){
fs.readFile(filename, encoding, function(err, res){
if(err)
return reject(err);
resolve(res);
});
});
}

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

等待一个promise


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

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

function readJSON(filename, encoding){
return new Promise(function(resolve, reject){
readFile(filename, encoding).then(function(res){
try{
resolve(JSON.parse(res));
}catch(ex){
reject(ex);
}
}, reject);
});
}

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

变化/链式结构


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

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

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

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

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

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

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

//data.json文件
//{"message": "Hello World!"} //readFile的Promise化
function readFile(filename, encoding){
return new Promise(function(resolve, reject){
fs.readFile(filename, encoding, function(err, res){
if(err)
return reject(err);
resolve(res);
});
});
} //readJSON的Promise化
function readJSON(filename, encoding){
return readFile(filename, encoding).then(JSON.parse);
} // readJSON函数的使用
readJSON("data.json", 'utf-8').then(function(data){
console.log(data.message); // Hello World!
});

我们可以看到臃肿混乱的回调金字塔已经消失了,剩下的是清爽干净的链式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. 使用Myeclipse完成Hibernate的逆向工程

    前面已经提到过Hibernate的开发流程一般有两种: 1.由Domain object > mapping > db 2.由db开始,用工具生成生成mapping 和Domain obj ...

  2. HeadFirst Jsp 14 (Structs)

    大的web程序可能很复杂, 分很多”层” 有关 RMI 的部分, 可以参考 headfirst java 中的 RMI 的部分. struts 是一个框架, 框架是一些接口和类的集合, 这些接口和类设 ...

  3. URAL1118. Nontrivial Numbers

    1118 优化 1.枚举到sqrt(n)2.区间有质数直接输出最大质数3.a=1 直接输出1 4.边+边与最小值比较 #include <iostream> #include<cst ...

  4. Android Studio AVD和SDK Manager灰色不能点击的问题。

    之前安装完Android Studio之后,迫不及待的打开,新建项目,发现模板新建之后里面没有文件,并且AVD Manager和SDK Manager 那一排的按钮灰色不能点. 之后查阅资料无果,最后 ...

  5. HDU 1394 (逆序数) Minimum Inversion Number

    原来求逆序数还可以用线段树,涨姿势了. 首先求出原始序列的逆序数,然后递推每一个序列的逆序数. #include <cstdio> #include <cstring> #in ...

  6. HDU 2063 (匈牙利算法) 过山车

    有m个妹子和n男生,男生和女生之间互相有好感则连一条线,问最多能撮合出多少对 这篇博文写的很好,没有让人望而生畏的图论术语 http://blog.csdn.net/dark_scope/articl ...

  7. UVa 455 Periodic Strings

    题意:给出一个字符串,找出它的最小的周期,枚举从1到len的周期,看是否满足. #include<iostream> #include<cstdio> #include< ...

  8. mysql无法插入中文字符解决

    1. 基于可维护的角度,虽然latin1没什么问题,但是还是尽量换成utf8或者gb系列 2. 出现乱码时: SHOW VARIABLES LIKE 'character%'SHOW VARIABLE ...

  9. 【英语】Bingo口语笔记(9) - 表示“不相信”

  10. 2015-10-09 Fri 晴 加快进度看书

    最近老感觉每天不够用,每天7点起来,吃饭完了8点开始看书,不知道是我看书太慢了还是时间过得真的很快,不知不觉中午就到了.而这个时候我才看2章的内容,下午能多看3章内容.一本书也就一天的时候,而我现在还 ...