一、常见的异步编程方法

1. 回调函数

2. 事件监听/发布订阅

3. Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

javascript">function runAsync1(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务执行完成1');
            resolve('数据1');
        }, 1000);
    });
    return p;            
}
function runAsync2(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务执行完成2');
            resolve('数据2');
        }, 2000);
    });
    return p;            
}
function runAsync3(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务执行完成3');
            resolve('数据3');
        }, 2000);
    });
    return p;            
}
 
runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});

控制台输出

异步任务执行完成1
数据1
异步任务执行完成2
数据2
异步任务执行完成3
数据3

promise
阮一峰promise

4. RxJS

二、Promise与RxJS处理异步对比

Promise 处理异步:

javascript">let promise = new Promise(resolve => { 
	setTimeout(() => {resolve('promise timeout'); }, 2000);
	});
promise.then(value => console.log(value)); //调用

RxJS 处理异步:

javascript">import {Observable} from 'rxjs'; //引入异步对象

let stream = new Observable(observer => { 
	setTimeout(() => {observer.next('observable timeout'); }, 2000);
	});
stream.subscribe(value => console.log(value)); //调用

RxJS 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。

从上面列子可以看到 RxJS 和 Promise 的基本用法非常类似，除了一些关键词不同。Promise 里面用的是 then() 和 resolve()，而 RxJS 里面用的是 next() 和 subscribe()。
实际上，RxJS更强大一些，它可以中途撤回unsubscribe，可以发射多个值，可以不断触发下一个值，提供了多种工具函数等。

三、Angular6.x之前使用RxJS的工具函数map/filter

注意：Angular6以后的版本，必须安装rxjs-compat模块才可以使用map、filter。Angular6后官方使用的是RXJS6的新特性
npm install rxjs-compat

四、Angular6.x之后RxJS6.x的变化以及使用

RXJS6改变了包的结构，主要变化在import的方式和operator上面以及使用pipe()

javascript">import {Observable} from 'rxjs'; //引入异步对象
import {map,rilter} from 'rxjs/operators';

let stream = new Observable<any>(observer => {
	let count = 0;
	setInterval(() => {
		observer,next(count++);
	},1000);
});
stream.pipe(
	filter(val => val%2==0),  //对数据筛选过滤
	map(value => {return value*value}) //对数据进行处理（如把json字符串转换成json对象）
).subscribe(value => console.log("filter">value));