异步——从Callback到Promise再到Rxjs

异步编程从以前的晦涩难懂，到现在的简单明了，从以前的功能单一，到现在的功能强大。

Callback

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

如下所示:

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

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

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

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

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

Promise

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

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

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

是不是看起来更麻烦了呢？那么我们稍微增加一点复杂度看看。下面是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('第五层'))

上面这段用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();

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

我们从一开始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()

Callback#

Promise#

Rxjs#

Callback

Promise

Rxjs