javascript - Observable 中的 Async/Await

标签 javascript rxjs observable

如何在 Observable 中使用 async/await? 使用此代码,我无法在可观察范围内触发取消订阅功能,因此不会清除间隔。

const { Observable } = require("rxjs");

const test = () => new Observable(async (subscriber) => {
  await Promise.resolve();

  const a = setInterval(() => {
    subscriber.next(Math.random());
    console.log("zz");
  }, 500);

  return () => {
    console.log("asdsad");
    clearInterval(a);
  };
});

const xyz = test().subscribe(console.log);


setTimeout(() => {
  xyz.unsubscribe();
}, 3000);

最佳答案

不支持 observable 中的 Async/Await。但是,它可以通过行为主体和异步嵌套函数来完成。

创建一个行为主体,将其转换为可观察对象(.asObservable()),执行异步嵌套函数,返回可观察对象。这是一个例子。

function getProgress() {

    // Change this value with latest details
    const value = new BehaviorSubject('10%');
    const observable = value.asObservable();

    // Create an async function
    const observer = async() => {
      // Perform all tasks in here
      const wait1 = await new Promise(resolve => setTimeout(resolve, 3000));
      value.next('66%');

      const wait2 = await new Promise(resolve => setTimeout(resolve, 3000));
      value.next('100%');

      // Complete observable
      value.complete();
    }

    // Call async function & return observable
    observer();
    return observable;
  }

它的可读性很强,而且很有魅力。

关于javascript - Observable 中的 Async/Await,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56815704/

相关文章:

javascript - 使用动态 css 属性的 Vue 列表渲染

javascript - 计算链中除combineLatest之外的其他运算符以避免冗余计算

angular - 类型 'subscribe' 上不存在属性 '() => Observable<any>'

angular - 只要不满足条件就重复HTTP请求

Javascript : is it possible to target only one version of iOs?

javascript - 在网络中重新着色图像

javascript - 导出函数和 module.exports 有什么区别?

Angular rxjs 订阅拆解

angular - 响应 rxjs 取消订阅

Javascript console.log 返回 c() 而不是对象的值