博客地址: 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时代，这是非常难得的。
