怎样在RxJS Observable中使用Async-Await

最新推荐文章于 2024-10-14 09:34:02 发布

低调奋进

最新推荐文章于 2024-10-14 09:34:02 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular2

原文链接：https://www.cnblogs.com/siegaii/p/11247544.html

Angular2 专栏收录该内容

42 篇文章

订阅专栏

本文探讨了在复杂异步逻辑处理中，如何利用Async-Await改善由RxJS引发的代码可读性问题。通过具体示例，展示了将RxJS Observable转换为Promise并结合Async-Await的方法，有效提升代码的清晰度与维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般情况下 async-await 和 Observables 并不能“在一起使用”。但RxJS 从一开始就具备与 Promises 的高度互操作性。

为什么有这个需求

由于工作中使用的ng7，之前工作中碰上一个比较复杂的逻辑（大概时两个轮询相互调用，每个轮询都有多种状态，其中一个轮询还内置了setTimeout，setInterval）

直接使用rxjs会导致嵌套非常多的层数（可能是我rxjs写的太菜了，rxjs有点难学，用了这么久还是只会一些基本的用法写不出大神一般华丽的操作），总之使用rxjs处理这个逻辑，让我的代码变得异常复杂，可读性变得非常的低，导致后面连自己看这段代码都变得非常吃力，今天我痛定思痛，决定使用Async-Await重写这部分的异步逻辑。最后终于解决了代码的可读性问题，由于可读性变高，还解决了之前一直不能解决的一些bug，和潜在bug。

应用

大概总结一下怎样在RxJS Observable中使用Async-Await;

复制代码

// 构造一个可观察对象
const source$ = Observable.interval(1000).take(3);

// 第一步当然是使用asycn关键字申明函数
asycn function test() {
    try{

        // toPromise()将可观察对象source$转为promise;
        const x = await source$.toPromise();

        console.log(x);

    } catch(err){
        console.log(err);
    }
}

复制代码