异步模式之JS、Promise、RXJS

最新推荐文章于 2024-08-10 21:19:29 发布

转载最新推荐文章于 2024-08-10 21:19:29 发布 · 356 阅读

Angular2 专栏收录该内容

139 篇文章

订阅专栏

原文出处：http://blog.youkuaiyun.com/u010730897/article/details/78390992

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

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

JavaScript实现

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

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

fn1(fn2);
 1
2
3
4
5
6
7

Promise实现

Promise的特点：
1、Pormise对象只要新建则会立即执行。
2、Promise的三种状态Pending（执行中）、Resolved（执行成功）、Rejected（执行失败）
3、状态一旦改变就不会再改变了。不论在后面怎么调用then，实际上的异步操作只会被执行一次，多次调用没有效果；

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

fn1.then((value)=>{
console.log(value);
fn2();
}).catch((error)=>{
console.log(error);
})
输出结果：
Strat Promise
1
如果失败则输出：
Strat Promise
0
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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(1);
observer.next(2);
observer.next(3);
observer.complete();
});
observable.subscribe(value => console.log(value),
err => { }, () => console.log('this is the end'));
//输出结果：
1 
2
3
this is the end
 1
2
3
4
5
6
7
8
9
10
11
12
13