Usando o timeout do RxJS com Angular 7

Como utilizar o operador timeout do RxJS para criar um limite no tempo de uma requisição http.

Nesse exemplo vou mostrar como utilizar o operador timeout da biblioteca RxJS para impor um limite de tempo em requisições http feitas para serviços de API externas. Evitando assim que o browser fique aguardando uma resposta por um tempo muito grande.

Inicialmente vamos criar um novo projeto com o angular cli que vai servir de base para o nosso exemplo.

$ ng new rxjs-timeout --routing --style scss
$ cd ./rxjs-timeout
$ code .

Eu gosto de usar o bootstrap como framework de css porque poupa muito tempo na construção de css para meus projetos então vou incluir ele também para facilitar a construção do layout.

$ yarn add bootstrap

Uma vez adicionada a biblioteca do bootstrap basta incluir o path para o css no arquivo src/style.scss .

@import "~bootstrap/scss/bootstrap";

Agora vamos adicionar um serviço para fazer a requisição http, como backend para efeito testes vou usar JSONPlaceholder, para retornar um json de exemplo e o Slowwly, para impor um delay na requisição afim de que possamos testar o operador timeout.

Para adicionar o serviço ao projeto basta usar o comando:

$ ng g service services/webRequest

Altere o código do service para ficar conforme o seguinte.

Como eu utilizei o parametro --routing na criação do projeto ele gerou um modulo para cuidar do roteamento da aplicação então vamos criar uma pagina para funcionar como nossa home default.

$ ng g component HomePage

E incluir essa pagina como nossa home page do projeto no modulo de roteamento conforme o código abaixo.

Apague o conteúdo do arquivo app-component.html e deixe conforme o código abaixo.

<div class="container-fluid">
  <router-outlet></router-outlet>
</div>

E altere o arquivo src/home-page/home-page.component.html como o indicado abaixo.

home-page.component.html

E no arquivo src/home-page/home-page.component.ts coloque o seguinte código.

Agora para poder testar basta executar no console do visual studio code o ng serve e acessar no browser na porta http://localhost:4200/ quando você clicar no botão load data, o angular vai fazer uma request para o jsonplaceholder. Porém existe um delay de 2s que acrescentamos propositalmente via slowwly, mas o operador timeout tem sua duração definida para 1s o que faz com que ele dispare primeiro. Com isso o que vemos na tela e um erro de timeout.

Para alterar o comportamento e só alterar a duração do operador timeout de 1s ou (1000) para 3s out (3000) o que vai fazer como que a request seja concluída primeiro que o timeout do operador.

Para ficar mais fácil eu subi o projeto de exemplo no meu github aqui.

Esse foi só um exemplo simples de como podemos usar os operadores da biblioteca RxJS para nosso projetos usando Angular. Se tiver alguma dúvida ou encontrar alguma coisa errada sinta-se à vontade para me avisar nos comentários. Até o próximo artigo.