Scheduler.async 的 RxJS 依赖问题

Question

我的 Angular2 组件的构造函数中有以下代码 class:

var observable = Observable.create(function (observer) {
      observer.next(1);
      observer.next(2);
      observer.next(3);
      observer.complete();
    }).observeOn(Scheduler.async);

我导入的包括以下内容：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/observeOn';
import { Scheduler } from 'rxjs/Scheduler';
import 'rxjs/scheduler/async';

我也尝试了以下导入，而不是上面的最后一个导入：

import { async } from 'rxjs/scheduler/async';

我在使用 Angulat CLI 构建项目时收到以下错误消息：

Property 'async' does not exist on type 'typeof Scheduler'

我错过了什么？

Answer 1

是的，这是正确的，因为：

import { Scheduler } from 'rxjs/Scheduler';

这意味着，您导入了这个 class：https://github.com/ReactiveX/rxjs/blob/5.4.0/src/Scheduler.ts#L8-L63

和

import { async } from 'rxjs/scheduler/async';

是https://github.com/ReactiveX/rxjs/blob/5.4.0/src/scheduler/async.ts#L47

所以你可以看到，Scheduler没有async属性，我猜你想转换这个东西Rx.Scheduler.asyncsource code here，你可以试试这个解决方案：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/observeOn';

import { async } from 'rxjs/scheduler/async';

var observable = Observable.create(function (observer) {
      observer.next(1);
      observer.next(2);
      observer.next(3);
      observer.complete();
    }).observeOn(async);

Answer 2

我认为这值得更深入的解释。

如果你只写：

import { Scheduler } from 'rxjs/Scheduler';

您正在导入您可能永远不想单独使用的 Scheduler class。导入它只是为了正确的类型检查是有用的，所以你可以有例如：

import { Scheduler } from 'rxjs/Scheduler';

class MyClass {
    sched: Scheduler;
}

但仅导入 async 您正在导入 already existing instance of an AsyncScheduler class。这是一个单例模式，因为通常不需要多个 AsyncScheduler 实例。

import { async } from 'rxjs/scheduler/async';

例如，现在您可以检查此特定调度程序的当前时间：

async.now();

实际上从 rxjs/scheduler/async 导入与使用 Scheduler 从 rxjs 导入是一样的，实际上是 Rx.ts:

import { Scheduler } from 'rxjs';

...

Scheduler.async.now();

您可以看到已经准备了更多不同的调度器：https://github.com/ReactiveX/rxjs/blob/master/src/Rx.ts#L193-L198

这里令人困惑的是使用 'rxjs/scheduler/async' 中的 async 和 'rxjs' 中的 Scheduler.async 之间的区别是什么。 The async from Rx.ts just imports the same 'rxjs/scheduler/async' 但由于您正在导入 rxjs，因此您还包括了 Rx.ts 中定义的所有依赖项。这意味着您要导入所有操作符，其中包含很多您可能不需要的文件。

这就是为什么最好只从 'rxjs/scheduler/async' 而不是 'rxjs' 导入它：

import { async } from 'rxjs/scheduler/async'

Answer 3

我知道这是为 typescript, angular and rxjs5 标记的，但是如果您来到这里并对为什么其他答案对您不起作用感到困惑，我认为调度程序的位置在 v6 中再次移动.我有一个 webpack 开发环境，我不得不将调度程序从裸露的 rxjs 模块中移除。如果您检查导入的模块，您可以看到所有调度程序：

import * as rxjs from "rxjs";
console.log(Object.keys(rxjs).filter(k => k.includes("Scheduler")));

将打印：

"asapScheduler"
"asyncScheduler"
"queueScheduler"
"animationFrameScheduler"
"VirtualTimeScheduler"
"Scheduler"

因此，如果您想要 async 调度程序，您可以这样做：

import {asyncScheduler} from "rxjs";

Scheduler.async 的 RxJS 依赖问题

RxJS dependency issue with Scheduler.async

rxjs

typescript

rxjs5

angular