遅延のあるオブザーバブルを作成するにはどうすればよいですか


94

質問

テストの目的でObservable、実際のhttp呼び出しによって返されるオブザーバブルを。に置き換えるオブジェクトを作成していますHttp

私のobservableは次のコードで作成されています:

fakeObservable = Observable.create(obs => {
  obs.next([1, 2, 3]);
  obs.complete();
});

問題は、この観測可能なものがすぐに放出されるということです。その放出にカスタム遅延を追加する方法はありますか?


追跡

私はこれを試しました:

fakeObservable = Observable.create(obs => {
  setTimeout(() => {
    obs.next([1, 2, 3]);
    obs.complete();
  }, 100);
});

しかし、それは機能していないようです。



でチェーンしようとし.create(...)ました.delay(1000)が、機能しませんでした:Observable_1.Observable.create(...)。delayは関数ではありません。
Adrien Brunelat 2017

1
正確に何を達成しようとしていますか?
ギュンターZöchbauer

オブザーバブルを購読していますか?
shusson 2017

私自身の観察可能なものでHttp応答の遅延を偽造します。@shussonええ、私がテストしているクラスは、サブスクライブするためにオブザーバブルのサービスを呼び出しています(私はモックしようとしています)。
Adrien Brunelat 2017

回答:


149

次のインポートを使用します。

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

これを試して:

let fakeResponse = [1,2,3];
let delayedObservable = Observable.of(fakeResponse).delay(5000);
delayedObservable.subscribe(data => console.log(data));

更新:RXJS 6

上記のソリューションは、RXJSの新しいバージョン(およびAngularなど)では実際には機能しなくなりました。

したがって、シナリオは、APIでチェックする項目の配列があるということです。APIは単一のアイテムのみを受け入れます。すべてのリクエストを一度に送信してAPIを強制終了したくありません。そのため、Observableストリーム上のアイテムを少し遅れてリリースする必要があります。

次のインポートを使用します。

import { from, of } from 'rxjs';
import { delay } from 'rxjs/internal/operators';
import { concatMap } from 'rxjs/internal/operators';

次に、次のコードを使用します。

const myArray = [1,2,3,4];

from(myArray).pipe(
        concatMap( item => of(item).pipe ( delay( 1000 ) ))
    ).subscribe ( timedItem => {
        console.log(timedItem)
    });

基本的に、配列内のすべてのアイテムに対して新しい「遅延」Observableを作成します。おそらく他にも多くの方法がありますが、これは私にとっては問題なく機能し、「新しい」RXJS形式に準拠しています。


2
プロパティ「of」はタイプ「typeofObservable」に存在しません。Observableをでインポートしますimport {Observable} from 'rxjs/Observable';か?
Adrien Brunelat 2017

1
このページから:npmjs.com/package/rxjs。で明示的にインポートする必要があると推測しましたimport 'rxjs/add/observable/of';。あなたはたまたま同じことをしますか?ただし、.delay(...)とチェーンせず、試してみるとエラーが表示されるため、まだ奇妙ですrxjs/add/observable/delay...
Adrien Brunelat 2017

4
なければならない of(item.pipe ( delay( 1000 ) ))ことがof(item))).pipe(delay(1000)、アレイは私にエラーが与えたパイプにしよう
ドン・トーマス・ボイル

1
これは、rxjs6で私のために働いたものです:from([1、2、3、4、5、6、7])。pipe(concatMap(num => of(num).pipe(delay(1000))))。 subscribe(x => console.log(x));
ロバート2018

1
@MikeOneのソリューションは私にも役立ちました。...そんなにコードは、このような単純な問題のために必要であることが悲しい
Codev

104

RxJS 5+では、次のように実行できます

import { Observable } from "rxjs/Observable";
import { of } from "rxjs/observable/of";
import { delay } from "rxjs/operators";

fakeObservable = of('dummy').pipe(delay(5000));

RxJS6 +では

import { of } from "rxjs";
import { delay } from "rxjs/operators";

fakeObservable = of('dummy').pipe(delay(5000));

放出される各値を遅らせたい場合は、

from([1, 2, 3]).pipe(concatMap(item => of(item).pipe(delay(1000))));

4
私の意見では最もクリーンな解決策。
Maayao

この「解決策」は、1つのアイテムを放出した場合にのみ機能します。オブザーバブルの各要素に対して遅延演算子は呼び出されません。そのため、恐ろしいconcatMapソリューションが必要です。
RickO'Shea20年

1
@ RickO'Shea、質問は1つの放出された値に関するものなので、このソリューションが理由です。
AdrianBer20年

1
とても新鮮でとてもきれいです!
Nahn

私は、複数の遅延のために私の答えを更新しました@ RickO'Shea
エイドリアンのBER

12

必要なのはタイマーです。

// RxJS v6+
import { timer } from 'rxjs';

//emit [1, 2, 3] after 1 second.
const source = timer(1000).map(([1, 2, 3]);
//output: [1, 2, 3]
const subscribe = source.subscribe(val => console.log(val));

3
良い答え、退会することを忘れないでください
サミ

8

答えるのは少し遅いです...しかし、誰かが答えを探してこの質問に戻るかもしれない場合に備えて

'delay'はObservableのプロパティ(関数)です

fakeObservable = Observable.create(obs => {
  obs.next([1, 2, 3]);
  obs.complete();
}).delay(3000);

これは私のために働いた...


1
import 'rxjs/add/operator/delay' 今すぐこのエラーが発生します: モジュールが見つかりません:エラー: 'rxjs / add / operator / delay'を解決できません
Aggie Jon of 87

それが非常に現実的であるのに、なぜあなたはあなたを観察可能な偽物と呼ぶのですか?:)
ラゴマン

0

import * as Rx from 'rxjs/Rx';

ブローコードを機能させるには、上記のインポートを追加する必要があります

Let obs = Rx.Observable
    .interval(1000).take(3);

obs.subscribe(value => console.log('Subscriber: ' + value));
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.