异步模式之JS、Promise、RXJS

在我们的开发过程中经常会遇到一个问题：一个方法需要在另一个方法执行结束之后才开始执行。这就是我们所说的异步。

现在我们假设有两个方法分别为fn1(),fn2();且fn2()在fn1()执行完后才开始执行。

JavaScript实现

使用setTimeout延迟2s执行fn2(),使用这种方式有个缺点是fn1()的执行时间不可控，而且如果fn2()需要fn1()的结果作为参数的话，这样可能会导致整个流程混乱。

fn1(callback){
setTimeout(function () {
callback();
}, 2000)
}

fn1(fn2);
           

Promise实现

Promise的特点：

1、Pormise对象只要新建则会立即执行。

2、Promise的三种状态Pending（执行中）、Resolved（执行成功）、Rejected（执行失败）

3、状态一旦改变就不会再改变了。不论在后面怎么调用then，实际上的异步操作只会被执行一次，多次调用没有效果；

let fn1 = new Promise((resolve,reject)=>{
console.log("Strat Promise");
resolve();//执行成功并将pending状态改变为resolved
//或者reject();执行失败并将pending状态改变为rejected
})

fn1.then((value)=>{
console.log(value);
fn2();
}).catch((error)=>{
console.log(error);
})
输出结果：
Strat Promise
1
如果失败则输出：
Strat Promise
0
           

RXJS实现

首先我们在Promise的基础之上已经发现Promise可以解决大部分异步问题了，但是如果我们想要在Promise resolve()之后再次resolve()怎么办？我们在then()之前不想立即执行的时候又该怎么办？所以出现了RXJS。

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

这里简单使用RXJS的Observable(这里可以理解为是一个对象)

将onSubscription函数转换为实际的Observable。 每当有人订阅该Observable时，该函数将使用Observer实例作为第一个也是唯一的参数进行调用。 onSubscription应该包含Observers的next，error和complete方法。

let observable = Rx.Observable.create(function (observer) {
observer.next();
observer.next();
observer.next();
observer.complete();
});
observable.subscribe(value => console.log(value),
err => { }, () => console.log('this is the end'));
//输出结果：
 


this is the end
           

只有当observer.complete();方法执行的时候才会回调。同样只用当observer.error()执行的时候，error的回调才会执行。

这里的observable不会立即执行，只有放observable.subscribe()的时候才开始执行里面的方法。

并且observable.subscribe()在不同时候调用都可以返回值，除非调用observable.unsubscribe()中断执行。