ฉันจะสร้างสิ่งที่สังเกตได้ด้วยความล่าช้าได้อย่างไร

คำถาม

สำหรับวัตถุประสงค์ในการทดสอบผมสร้างObservableวัตถุที่แทนที่สังเกตได้ว่าจะได้รับการส่งกลับโดยการโทร http Httpเกิดขึ้นจริงกับ

สิ่งที่สังเกตได้ของฉันถูกสร้างขึ้นด้วยรหัสต่อไปนี้:

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

สิ่งนี้คือสิ่งที่สังเกตได้นี้จะเปล่งออกมาทันที มีวิธีเพิ่มการหน่วงเวลาแบบกำหนดเองให้กับการปล่อยหรือไม่?

ติดตาม

ฉันลองสิ่งนี้:

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

แต่ดูเหมือนจะไม่ได้ผล

ใช้การนำเข้าต่อไปนี้:

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 เวอร์ชันใหม่กว่า (และของเชิงมุมเป็นต้น)

ดังนั้นสถานการณ์คือฉันมีอาร์เรย์ของรายการที่จะตรวจสอบกับ 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)
    });

โดยพื้นฐานแล้วจะสร้าง 'ล่าช้า' สังเกตได้ใหม่สำหรับทุกรายการในอาร์เรย์ของคุณ อาจมีวิธีอื่น ๆ อีกมากมายในการทำเช่นนี้ แต่วิธีนี้ใช้ได้ดีสำหรับฉันและสอดคล้องกับรูปแบบ RXJS 'ใหม่'

ใน RxJS 5+ คุณสามารถทำได้เช่นนี้

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

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

ใน RxJS 6+

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))));

สิ่งที่คุณต้องการคือตัวจับเวลา:

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

มันสายไปหน่อยที่จะตอบ ... แต่ในกรณีที่อาจมีคนกลับมาที่คำถามนี้เพื่อหาคำตอบ

'delay' เป็นคุณสมบัติ (ฟังก์ชัน) ของ Observable

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

สิ่งนี้ได้ผลสำหรับฉัน ...

import * as Rx from 'rxjs/Rx';

เราควรเพิ่มการนำเข้าด้านบนเพื่อให้รหัสระเบิดทำงาน

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

obs.subscribe(value => console.log('Subscriber: ' + value));