异步——从Callback到Promise再到Rxjs

博客地址: http://www.liushihua.org/2017/08/31/callback-promise-rxjs.html
本文章JavaScript demo可以在博客中直接运行结果哦!

异步编程的变迁史,本文仅作为本人对异步编程知识的梳理,同时向大家展示一下各种方法的不同用法。

Callback

在远古时代,人们为了实现异步编程,通常采用callback的形式,定义好一个回调函数,在需要异步请求的地方,注册回调函数,等异常请求返回后,把数据传入回调函数,对异步请求的结果进行处理。

如下所示:

const callback = () => {
console.log('I am a callback');
}

console.log('Hello');
setTimeout(callback, 1000);
console.log('world);

0;

这样的方式初看起来简单明了,但是它经不起复杂度的考验,如果是多个异步的嵌套,就会立刻变得晦涩,继续上代码

const log = console.log;
setTimeout(() => {
  log('我是第一层');
  setTimeout(() => {
    log('我是第二层');
    setTimeout(() => {
      log('我是第三层');
      setTimeout(() => {
        log('我是第四层');
      }, 1000)
    }, 1000)
  }, 1000)
}, 1000);
log('hello')

0;

这样的代码不利于阅读,也不利于维护,接下来出现的是Promise,一个很重要的类型

Promise

Promise 是代表一个承诺,它可以承诺在一定的时间内,他会完成他的事件或者抛出错误。
换句话说,它刚生成时,他的状态是不确定的,在一定时间后,他的状态肯定会确定下来,同时只有两种情况,一种是顺利完成,一种是出错异常。在编写代码过程中只需要监听这两个状态就可以对其结果进行处理,通过链式调用的方式可以使代码更加易读。
下面是使用Promise的模拟耗时的异步操作

const reqPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Request完成');
    resolve({data: 1})
  },1000)
})

reqPromise.then(x => console.log(x));

0;

是不是看起来更麻烦了呢? 那么我们稍微增加一点复杂度看看。下面是Promise嵌套的情况:

const getPromise = x => new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(x);
    resolve({data: 1})
  },1000)
});

getPromise('第一层').then(x => getPromise('第二层'))
          .then(x => getPromise('第三层'))
          .then(x => getPromise('第四层'))
          .then(x => getPromise('第五层'))
          
0;

上面这段用Promise写的比直接使用Callback写的相比,是不是清晰了很多啊
使用扁平的链式调用替代多层级的嵌套结构,对于代码维护起来也是清晰很多。

但是到此我们就满足了吗?

No,链式调用依然存在一些书写上的问题,上面的例子全都是异步代码,如果需要写同步代码的话,需要在Promise外面去写,异步代码是在Promise的resolve里面去写,这样丧失了代码的可读性。能不能把所有的代码都看成是同步的呢? 这样代码风格不就统一了吗?

最新的es2017版本中有了async/swait的写法,它并不是一个新的功能,可以看做是Promise的语法糖。

我们把上面的Promise代码改一下如何:

const getPromise = x => new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(x);
    resolve({data: 1})
  },1000)
});

const run = async () => {
  await getPromise('第一层').then(x => console.log('我是第一层的Resolve'))
  console.log('我是第一层之后的同步代码');
  await getPromise('第二层').then(x => console.log('我是第二层的Resolve'))
  console.log('我是第二层之后的同步代码');
  await getPromise('第三层').then(x => console.log('我是第三层的Resolve'))
  console.log('我是第三层之后的同步代码');
};

// 启动
run();

0;

各位觉得这样的代码看起来如何呢?

我们从一开始Callback的那种一堆压缩成了Promise的一条线。
然后又把这条线用async/await折叠成了四方的纸。
有么有感觉到巨大的进步呢?

别着急,我们可以继续思考一下。能不能把同步和异步的代码全部当成异步来操作呢。这样是不是也可以去规范代码书写啊?

于是响应式编程应时而生。

Rxjs

Rxjs并不等于响应式编程,它只是RP(Reactive Programming)的一个类库实现,但是因为它在几乎所有主流语言上都有实现,所有rx算是rp中的中坚力量了吧。

在深入介绍rxjs之前,我们先用rxjs代码实现以上的那个例子.

const { Observable: ob} = require('rxjs');

const getPromise = x => new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(x);
    resolve({data: 1})
  },1000)
});

ob.from(getPromise('第一层'))
  .map(x => console.log('我是第一层之后的异步代码'))
  .flatMap(x => getPromise('第二层'))
  .map(x => console.log('我是第二层之后的异步代码'))
  .flatMap(x => getPromise('第三层'))
  .map(x => console.log('我是第三层之后的异步代码'))
  .flatMap(x => getPromise('第四层'))
  .map(x => console.log('我是第四层之后的异步代码'))
  .flatMap(x => getPromise('第五层'))
  .map(x => console.log('我是第五层之后的异步代码'))
  .subscribe()

0;

现在从一叠纸又回到了一条线,不,准确的说变成了一个管道。不管是同步操作还是异步的操作,都在这个管道中被声明,起点一个信号,经过管道中所有的同步或异步操作之后才会到达结尾的输出,也就是订阅(subscribe()).

啰嗦一下

异步编程的书写方式的变更,不仅仅是编码效率的改变,也不仅仅是代码风格的升级。
这是编程范式的变更。
最主要的是带动思维方式的转变。响应式编程可以使你从不同的角度去思考一个问题的解,在后OO时代,这是非常难得的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容