Saṃvit contempla sua forma de lobo-guará enquanto ambas flutuam entre órbitas luminosas e um cubo cósmico.

Matrix on-line · Experimento 02

Um portal para o universo

Escolha um tema e abra uma passagem até um acervo real. A interface transforma a espera, a resposta e até a falha de uma requisição REST em algo que pode ser acompanhado.

Iniciar experimento

Laboratório REST

Invoque uma imagem do cosmos

Sua ação cria uma requisição HTTP para o acervo da NASA. O JSON traz os dados e o endereço da imagem; o navegador busca esse arquivo em uma segunda requisição para revelar o resultado no portal.

O portal está em repousoNenhuma requisição foi enviada. Escolha um tema para começar.

Dados e imagens: NASA Image and Video Library

Inspetor da requisição

Requisição e resposta

Esta não é uma simulação: são o método, o endereço, os parâmetros e o resultado mapeado da requisição real.

Método: GET
Status HTTP: —

Endpoint

https://images-api.nasa.gov/search

Parâmetros

q: Orion nebula
media_type: image
page_size: 12

URL completa

https://images-api.nasa.gov/search?q=Orion%20nebula&media_type=image&page_size=12

Resposta após o mapeamento

{}

1. A ação entra no fluxo. O envio do formulário lê o tema atual e o publica em um Subject, que funciona como a entrada do fluxo assíncrono.

O envio do formulário lê o tema atual e o publica em um Subject, que funciona como a entrada do fluxo assíncrono.

rest-api-portal.tsTypeScript

1. A ação entra no fluxo

search(): void {
  const query = this.query().trim();

  if (!query) {
    return;
  }

  this.searchRequests.next(query);
}

const nasaId = this.curatedNasaId(query);
const params = new HttpParams()
  .set(nasaId ? 'nasa_id' : 'q', nasaId ?? query)
  .set('media_type', 'image')
  .set('page_size', '12');

return this.http.get<NasaSearchResponseDto>(
  this.endpoint,
  { params, observe: 'response' },
);

this.searchRequests
  .pipe(
    tap((query) => this.beginRequest(query)),
    switchMap((query) =>
      this.api.searchImages(query).pipe(
        catchError((error) => of({ kind: 'error', error })),
      ),
    ),
    takeUntilDestroyed(),
  )
  .subscribe((outcome) => this.finishRequest(outcome));

const previewUrl = item.links
  ?.find((link) =>
    link.rel === 'preview' && link.render === 'image'
  )?.href?.trim();

const image = {
  id: data.nasa_id,
  title: data.title,
  credit: data.photographer || data.secondary_creator || 'NASA',
  imageUrl: previewUrl,
};

O que você faz?

Escolhe um tema e envia o formulário. Esse evento é o ponto de partida da requisição.

O que o Angular percebe?

O estado muda de repouso para carregamento e, depois, para sucesso, vazio ou erro. Cada mudança atualiza somente a representação correspondente.

O que se move no código?

Um texto entra no fluxo RxJS, o HttpClient recebe JSON e o service mapeia o DTO externo para um modelo pequeno e seguro para a interface.