Practical observable usage

다음은 관찰 성이 특히 유용한 도메인의 예입니다.

옵서버블은 사전 형 제안의 구현을 단순화 할 수 있습니다. 일반적으로 사전 판매는 일련의 별도 작업을 수행해야합니다.

• 입력 데이터를 들어 봅니다.
• 값을 다듬고 (공백을 제거하십시오) 최소 길이인지 확인하십시오.
• Debounce (모든 키 스트로크에 대해 API 요청을 보내지 않고 대신 키 입력의 중단을 기다리십시오).
• 값이 동일하게 유지되면 요청을 보내지 않습니다 (예를 들어 문자를 빠르게 치고 백스 페이스).
• 업데이트 된 결과로 인해 결과가 무효화되는 경우 진행중인 AJAX 요청을 취소하십시오.

이것을 전체 자바 스크립트로 작성하는 것은 상당히 복잡 할 수 있습니다. observables를 사용하면 간단한 일련의 RxJS 연산자를 사용할 수 있습니다.

import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
const searchBox = document.getElementById('search-box');
 
const typeahead = fromEvent(searchBox, 'input').pipe(
  map((e: KeyboardEvent) => e.target.value),
  filter(text => text.length > 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(() => ajax('/api/endpoint'))
);
 
typeahead.subscribe(data => {
 // Handle the data from the API
});

기하 급수적 백 오프는 실패 후 API를 다시 시도하여 연속적인 실패가 발생할 때마다 다시 시도 간격을 늘리고 요청이 실패한 것으로 간주되는 최대 재시도 횟수로 만듭니다. 이것은 약속과 AJAX 호출을 추적하는 다른 방법으로 구현하기에는 상당히 복잡 할 수 있습니다. Observables를 사용하면 매우 쉽습니다.

import { pipe, range, timer, zip } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { retryWhen, map, mergeMap } from 'rxjs/operators';
 
function backoff(maxTries, ms) {
 return pipe(
   retryWhen(attempts => zip(range(1, maxTries), attempts)
     .pipe(
       map(([i]) => i * i),
       mergeMap(i =>  timer(i * ms))
     )
   )
 );
}
 
ajax('/api/endpoint')
  .pipe(backoff(3, 250))
  .subscribe(data => handleData(data));
 
function handleData(data) {
  // ...
}