diff --git a/apps/rxjs/catch-error/src/app/app.component.ts b/apps/rxjs/catch-error/src/app/app.component.ts index 6974c93..b6ac066 100644 --- a/apps/rxjs/catch-error/src/app/app.component.ts +++ b/apps/rxjs/catch-error/src/app/app.component.ts @@ -1,8 +1,8 @@ -import { Component, DestroyRef, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpClient } from '@angular/common/http'; -import { FormsModule } from '@angular/forms'; +import { Component, DestroyRef, OnInit, inject } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { FormsModule } from '@angular/forms'; import { Subject, concatMap, map } from 'rxjs'; @Component({ @@ -11,11 +11,11 @@ import { Subject, concatMap, map } from 'rxjs'; selector: 'app-root', template: `
- possible values: posts, comments, albums, photos, todos, users + + possible values: posts, comments, albums, photos, todos, users +
-
+ (); +export class AppComponent implements OnInit { + submit$ = new Subject(); input = ''; response: unknown; + private destroyRef = inject(DestroyRef); - constructor(private http: HttpClient) {} + private http = inject(HttpClient); + ngOnInit() { - this.submit$$ + this.submit$ .pipe( map(() => this.input), concatMap((value) => - this.http.get(`https://jsonplaceholder.typicode.com/${value}/1`) + this.http.get(`https://jsonplaceholder.typicode.com/${value}/1`), ), - takeUntilDestroyed(this.destroyRef) + takeUntilDestroyed(this.destroyRef), ) .subscribe({ next: (value) => { diff --git a/docs/src/content/docs/pt/challenges/rxjs/38-rxjs-catch-error.md b/docs/src/content/docs/pt/challenges/rxjs/38-rxjs-catch-error.md new file mode 100644 index 0000000..21f1b37 --- /dev/null +++ b/docs/src/content/docs/pt/challenges/rxjs/38-rxjs-catch-error.md @@ -0,0 +1,33 @@ +--- +title: 🟢 catchError +description: Desafio 38 é sobre aprender conclusão de observable +author: devesh-chaudhari +command: rxjs-catch-error +challengeNumber: 38 +sidebar: + order: 14 +--- + +## Informação + +### Como usar a aplicação + +Nossa aplicação possui um formulário com um input textual e um botão "Fetch". Ao clicar o botão, dados são requeridos de uma [API gratuita](https://jsonplaceholder.typicode.com/). + +Os valores aceitos para requisições de sucesso estão limitados em: posts, comments, albums, photos, todos, and users. Qualquer outro valor, resultará em erro na requisição. + +### Bug + +Um bug foi identificado na nossa aplicação. Usuários conseguem apenas recuperar dados até uma requisição fracassar. Quando uma requisição retorna com erro, os usuários não conseguem mais enviar outras requisições. + +### Aprendizados + +Esta aplicação providencia uma oportunidade de entender onde colocar o operador [`catchError`](https://rxjs.dev/api/operators/catchError) corretamente. Se colocado de forma incorreta, a inscrição será completada, impedindo usuários de enviar mais requisições. O objetivo é preservar a inscrição através do manuseio dos erro nos observables internos de forma apropriada. + +## Declaração + +O objetivo é usar o operator catchError para lidar com o gerenciamento de erro dentro do seu fluxo de dados Rxjs. + +## Restrições + +Usuários devem ser aptos para logar o valor/erro cada vez que clicam o botão "Fetch".