可观察对象内部的异步/等待

时间:2019-06-29 07:00:36

标签: 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);

2 个答案:

答案 0 :(得分:1)

不支持 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;
  }

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

答案 1 :(得分:0)

首先,传递给可观察的构造器的订户不能是异步功能。没有对此的支持。

如果您需要根据诺言创建可观察的内容,请使用from

import { from } from 'rxjs';
const observable = from(promise);

但是考虑您的情况。

由于无法取消本机js承诺,因此您无法真正取消订阅此类创建的可观察对象,因此:

const obs = from(new Promise(resolve => {
  setTimeout(() => {
    console.log('gonna resolve');
    resolve('foo');
  }, 1000);
}));

const sub = obs.subscribe(console.log);
setTimeout(() => sub.unsubscribe(), 500);

将打印:

gonna resolve
gonna resolve
gonna resolve
(...)

所以是的:gonna resolve会一直打印在控制台上,但仅此而已-传递给解析的结果将被忽略-只是未记录。

另一方面,如果您这次取消取消订阅(setTimeout(() => sub.unsubscribe(), 500);),则会看到:

gonna resolve
foo
gonna resolve
gonna resolve
gonna resolve
(...)

有一种可能会帮助您的方法-defer-但与您的问题并不严格相关。

import { defer } from 'rxjs';

defer(async () => {
  const a = await Promise.resolve(1);
  const b = a + await Promise.resolve(2);

  return a + b + await Promise.resolve(3);
}).subscribe(x => console.log(x)) // logs 7