차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- angular:observable_rxjs:rxjs [2019/03/02 13:43] – 만듦 taekgu
+++ angular:observable_rxjs:rxjs [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 136: / 줄 136: @@
 ===== Error handling =====
-RxJS는 subscription에 제공하는 error () 처리기 외에도 관찰 가능한 처리법에서 알려진 오류를 처리 할 수있는 catchError 연산자를 제공합니다.
+RxJS는 subscription에 제공하는 error() 처리기 외에도 관찰 가능한 처리법에서 알려진 오류를 처리 할 수있는 catchError 연산자를 제공합니다.
 예를 들어, API 요청을 만들고 서버의 응답에 매핑되는 관찰 가능 항목이 있다고 가정합니다. 서버가 오류를 리턴하거나 값이 존재하지 않으면 오류가 발생합니다. 이 오류를 포착하여 기본값을 제공하면 스트림은 오류가 아닌 값을 계속 처리합니다.
 다음은 catchError 연산자를 사용하여이를 수행하는 예제입니다.
+<code javascript>
+import { ajax } from 'rxjs/ajax';
+import { map, catchError } from 'rxjs/operators';
+// Return "response" from the API. If an error happens,
+// return an empty array.
+const apiData = ajax('/api/data').pipe(
+  map(res => {
+    if (!res.response) {
+      throw new Error('Value expected!');
+    }
+    return res.response;
+  }),
+  catchError(err => of([]))
+);
+apiData.subscribe({
+  next(x) { console.log('data: ', x); },
+  error(err) { console.log('errors already caught... will not run'); }
+});
+</code>
+==== Retry failed observable ====
+catchError 연산자가 단순 복구 경로를 제공하는 경우, 재시도 연산자를 사용하여 실패한 요청을 재 시도 할 수 있습니다.
+catchError 연산자 앞에 retry 연산자를 사용하십시오. 이는 관찰 가능한 원본 소스에 다시 구독하고 오류를 유발 한 모든 동작 시퀀스를 다시 실행할 수 있습니다. 여기에 HTTP 요청이 포함되어 있으면 해당 HTTP 요청을 다시 시도합니다.
+다음은 오류를 잡기 전에 이전 예제를 변환하여 요청을 다시 시도합니다.
+<code javascript>
+import { ajax } from 'rxjs/ajax';
+import { map, retry, catchError } from 'rxjs/operators';
+const apiData = ajax('/api/data').pipe(
+  retry(3), // Retry up to 3 times before failing
+  map(res => {
+    if (!res.response) {
+      throw new Error('Value expected!');
+    }
+    return res.response;
+  }),
+  catchError(err => of([]))
+);
+apiData.subscribe({
+  next(x) { console.log('data: ', x); },
+  error(err) { console.log('errors already caught... will not run'); }
+});
+</code>
+**인증(authentication)** request는 사용자 작업에 의해서만 시작되어야하므로 다시 시도하지 마십시오. 사용자가 시작하지 않은 반복 된 로그인 요청으로 사용자 계정을 잠그고 싶지 않습니다.
+===== Naming conventions for observables =====
+각도 응용 프로그램은 대부분 TypeScript로 작성되기 때문에 일반적으로 변수가 관찰 가능 일 때를 알 수 있습니다. Angular 프레임 워크는 관측 대상에 대한 명명 규칙을 적용하지 않지만 후행하는 "$"기호로 명명 된 관측 대상을 자주 볼 수 있습니다.
+코드를 스캔하여 관찰 가능한 값을 찾을 때 유용 할 수 있습니다. 또한, 관측 대상에서 가장 최근 값을 저장하는 속성을 원하면 "$"의 유무와 상관없이 동일한 이름을 사용하는 것이 편리 할 수 있습니다.
+예 :
+<code javascript>
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+@Component({
+  selector: 'app-stopwatch',
+  templateUrl: './stopwatch.component.html'
+})
+export class StopwatchComponent {
+  stopwatchValue: number;
+  stopwatchValue$: Observable<number>;
+  start() {
+    this.stopwatchValue$.subscribe(num =>
+      this.stopwatchValue = num
+    );
+  }
+}
+</code>

GaramX

사용자 도구

사이트 도구

차이

문서 도구