web-dev-qa-db-fra.com

Comment créer un observable avec un délai

Question

À des fins de test, je crée des objets Observable qui remplacent l'observable renvoyé par un appel http réel avec Http.

Mon observable est créé avec le code suivant:

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

Le fait est que cet observable émet immédiatement. Existe-t-il un moyen d'ajouter un délai personnalisé à son émission?

Piste

J'ai essayé ceci:

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

Mais cela ne semble pas fonctionner.

angulartypescriptobservable
54
Adrien Brunelat

En utilisant les importations suivantes:

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

Essaye ça:

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

MISE À JOUR: RXJS 6

La solution ci-dessus ne fonctionne plus vraiment dans les versions plus récentes de RXJS (et de angular par exemple).

Le scénario est donc que j'ai un tableau d'éléments à vérifier avec une API. L'API n'accepte qu'un seul élément et je ne veux pas la tuer en envoyant toutes les demandes en même temps. J'ai donc besoin d'une publication ponctuelle des éléments du flux Observable avec un léger délai entre les deux.

Utilisez les importations suivantes:

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

Ensuite, utilisez le code suivant:

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

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

Cela crée fondamentalement un nouvel observable 'retardé' pour chaque élément de votre tableau. Il y a probablement beaucoup d'autres façons de le faire, mais cela a bien fonctionné pour moi et est conforme au "nouveau" format RXJS.

101
MikeOne

Dans RxJS 5+, vous pouvez le faire comme ceci

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

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

Dans RxJS 6+

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

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

Il est un peu tard pour répondre ... mais juste au cas où quelqu'un reviendrait sur cette question à la recherche d'une réponse

'delay' est la propriété (fonction) d'un observable

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

Cela a fonctionné pour moi ...

8
microchip78

Ce que vous voulez, c'est une minuterie:

// 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));
5
Pellet