neste tutorial, você será introduzido para HTTP erros em JavaScript, e como usar o HttpClient com RxJS de tratamento de erro operadores e, finalmente, como usar o HttpInterceptor

Este é um mergulho profundo em HTTP tratamento de erro Angular 7, você pode querer verificar para fora os post introdutório na manipulação de erro aqui.

pré-requisitos

para ser capaz de acompanhar a demonstração deste tutorial você deve ter:

  • Node versão 11.0 instalado em sua máquina.
  • Node Package Manager version 6.7 (usually ships with Node installation).
  • Angular CLI version 7.0
  • A última versão Angular (version 7)
 // run the command in a terminal ng version

confirme que está a utilizar a versão 7, e actualize para 7 Se não estiver.Outras coisas que serão agradáveis de ter São:

  • um conhecimento de trabalho da estrutura Angular a um nível iniciante.a familiaridade com os Serviços angulares será um factor positivo, mas não um requisito.

erros de Outsider

estes são erros que chamamos de erros do lado do servidor porque eles vêm principalmente de fora da aplicação Angular e um HttpErrorResponse é sempre devolvido quando ocorrem. Tem propriedades como:

  • Nome de erro: isto indica o nome do erro.
  • mensagem de erro: isto tenta explicar o erro em termos simples para uma compreensão mais fácil.estado de erro
  • : cada tipo de erro do lado do servidor tem um código atribuído a ele para diferenciá-lo do resto. Estes códigos são geralmente códigos de três dígitos como 400, o que significa que o pedido enviado foi inesperado ou 500 que, sinais de erro interno do servidor e assim por diante.

manipulador de erros no Angular

Angular tem uma classe global de tratamento de erros chamada errorHandler que fornece um gancho para o tratamento centralizado de excepções dentro da sua aplicação. Ele basicamente intercepta todos os erros que acontecem em sua aplicação, e regista todos eles para o console, e impede o aplicativo de falhar.A sintaxe se parece com esta:

 class MyErrorHandler implements ErrorHandler { handleError(error) { // do something with the exception } } @NgModule({ providers: }) class MyModule {}

esta é uma ótima maneira de lidar com erros angulares, particularmente os erros de insider.

a limitação do errorHandler

Se você seguiu a partir do post introdutório aqui, você verá como a classe Angular de errorHandler foi a solução final para centralizar o conceito de tentativa/captura de erros em nossa aplicação. No entanto, quando queremos focar em erros do lado do servidor, descobrimos que a classe errorHandler não pode trabalhar diretamente com solicitações HTTP em nossa aplicação. A boa notícia é que o Angular fornece um tipo de interface onde você pode usar o conceito da classe errorHandler para lidar diretamente com pedidos HTTP.

solução 1: HttpClient Angular

a (https://angular.io/api/common/http/HttpClient)in@angular/common/``(https://angular.io/api/common/http)oferece uma API HTTP simplificada para aplicações angulares que repousa na interfaceXMLHttpRequest exposta por navegadores. Benefícios adicionais de (https://angular.io/api/common/http/HttpClient)incluem características de testabilidade, pedidos tipados e objetos de resposta, intercepção de Pedidos e Respostas,Observable APIs, e manipulação simplificada de erros. Então usando este cliente com alguns operadores RxJS podemos obter uma espécie de tentativa/captura de manipulação de erros, mas desta vez comunicar diretamente com os pedidos HTTP através de uma aplicação Angular em um serviço. Você entenderá melhor em ação.

Demonstração

Esta é uma demonstração jsonplaceholder aplicação, onde partes dos dados disponíveis sobre o jsonplaceholder é exibida na interface do usuário, um serviço perfeito para demonstrar o servidor de conceitos relacionados. Se você tiver todos os pré-requisitos indicados no início do post pronto, você pode baixar o projeto do GitHub aqui. Abrir e abrir o projecto em código VS e usar o terminal para inicializar os módulos do nó:

 npm install

Agora que a sua aplicação está pronta e em execução, você tem que, em primeiro lugar e acima de tudo, garantir que o módulo necessário para aplicações angulares para usar qualquer serviço de servidor está ativo em sua aplicação. Navegue para o seu ficheiro app.module.ts e confirme que existe uma declaração de importação como esta:

 import { HttpClientModule } from '@angular/common/http';

a sua aplicação tem quatro componentes: publicações, barra lateral, detalhes e utilizadores. Ele também tem um serviço chamado serviço de dados onde todos os pedidos HTTP são feitos. O seu ficheiro data.service.ts deverá ser parecido com este:

 // src/app/services/data.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class DataService { constructor(private http: HttpClient) { } getUsers() { return this.http.get('https://jsonplaceholder.typicode.com/users') } getUser(userId) { return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId) } getPosts() { return this.http.get('https://jsonplaceholder.typicode.com/posts') } }

Três pedidos estão sendo feitos para o servidor, agora se você escolher um desses pedidos, dizer getUsers() e você deseja adicionar o tratamento de erros com o HttpClient, em seguida, você irá:

  • Importar o catchError objeto de RxJS operadores.
  • import throwError from RxJS.
  • Use o método do tubo para introduzi-lo no pedido HTTP desejado.
  • crie um método para lidar com o erro

se seguir estes, o seu ficheiro data.service.ts irá parecer com este:

 // src/app/services/data.service.ts import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { catchError } from 'rxjs/operators' import { throwError } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class DataService { constructor(private http: HttpClient) { } getUsers() { return this.http.get('https://jsonplaceholder.typicode.com/usssers') .pipe( catchError(this.handleError) ); } getUser(userId) { return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId) } getPosts() { return this.http.get('https://jsonplaceholder.typicode.com/posts') } handleError(error: HttpErrorResponse){ console.log("lalalalalalalala"); return throwError(error); } }

você verá que o pedido de obtenção foi deliberadamente adulterado para garantir que ocorra um erro. Quando executar a aplicação, irá ver o erro registado com a mensagem de registo que queremos.

às Vezes, quando você envia uma solicitação para um conhecido do servidor lento, você sabe que pode demorar um pouco para obter a resposta ou demorar algumas tentativas para realmente obter resposta do servidor, você pode reenviar a solicitação de um número de vezes antes de atirar o erro. Isto pode ser obtido com o método de repetição em RxJS, assim que você importar a repetição do operador, em seguida, você pode usá-lo no interior do tubo, como ele é usado abaixo:

 // src/app/services/data.service.ts import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { catchError, retry } from 'rxjs/operators' import { throwError } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class DataService { constructor(private http: HttpClient) { } getUsers() { return this.http.get('https://jsonplaceholder.typicode.com/usssers') .pipe( retry(2), catchError(this.handleError) ); } getUser(userId) { return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId) } getPosts() { return this.http.get('https://jsonplaceholder.typicode.com/posts') } handleError(error: HttpErrorResponse){ console.log("lalalalalalalala"); return throwError(error); } }

Se você executar o aplicativo, o console deve olhar como este:

Você ver ele primeiro tenta obter a resposta, em seguida, repete duas vezes apenas como especificado antes de atirar a mensagem de log de erro.

também é muito importante que a sua repetição venha antes do erro para que a mensagem de erro não seja registrada após cada tentativa.

Esta solução funciona perfeitamente desde que a sua aplicação tenha um serviço e, provavelmente, um pedido get, mas quando sua aplicação é grande e tem muitos serviços ou muito mais solicitações por serviço torna-se uma solução ineficiente. Isto é porque você tem que sempre copiar a função de erro handle através de serviços e repetir o código mesmo dentro de um serviço. Imagine o custo de memória de depuração e manutenção da base de código.

a melhor opção: Angular HttpInterceptor

tal como o nome diz, Angular fornece uma interface chamada HttpInterceptor que pode interceptar (https://angular.io/api/common/http/HttpRequest) e (https://angular.io/api/common/http/HttpResponse) e cria uma plataforma para lidar com eles. Isto significa que temos acesso direto aos nossos pedidos de servidor, que melhor lugar para lidar com erros de servidor do que aqui!A sintaxe se parece com esta:

 interface HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> }

para usar o HttpInterceptor, crie um novo serviço onde deseja que a sua lógica interceptor entre com o CLI Angular:

 ng generate service services/interceptor

Agora você tem gerado um interceptor de serviço, vá para o app.module.ts arquivo para registrá-lo assim, como este:

 // src/app/app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { UsersComponent } from './components/users/users.component'; import { DetailsComponent } from './components/details/details.component'; import { PostsComponent } from './components/posts/posts.component'; import { SidebarComponent } from './components/sidebar/sidebar.component'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations' import { InterceptorService } from './services/interceptor.service'; @NgModule({ declarations: , imports: , providers: , bootstrap: }) export class AppModule { }

o Próximo passo é se livrar de todos o erro de lógica de manipulação de data.service.ts arquivo, o arquivo deve ficar assim quando você é feito:

 // src/app/services/data.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class DataService { constructor(private http: HttpClient) { } getUsers() { return this.http.get('https://jsonplaceholder.typicode.com/usersss') } getUser(userId) { return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId) } getPosts() { return this.http.get('https://jsonplaceholder.typicode.com/posts') } }

Copie o código abaixo dentro da tag interceptor.service.ts arquivo:

 // src/app/services/interceptor.service.ts import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class InterceptorService implements HttpInterceptor{ constructor() { } handleError(error: HttpErrorResponse){ console.log("lalalalalalalala"); return throwError(error); } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{ return next.handle(req) .pipe( catchError(this.handleError) ) }; }

Se você executar o aplicativo, você pode ver que ele registra a nossa mensagem de erro e lança o erro assim como esperamos. Este é o melhor método de manipulação de erros do servidor em seu projeto Angular. Você pode testar todos os três pedidos de uma vez para erros adulterando-os. Quando você fizer, você vai descobrir que o interceptor pega todos eles e regista a nossa mensagem para cada um, é realmente incrível assistir.

conclusão

foi introduzido em várias formas de lidar com erros do lado do servidor nas suas aplicações angulares. Você também viu quando usar e quando não usar o HttpClient com os operadores RxJS e como a melhor maneira é usando interceptadores. No próximo tutorial desta série, você será introduzido ao rastreamento de erros. O código completo para este tutorial está no GitHub e pode ser encontrado aqui. Feliz código!

Deixe uma resposta

O seu endereço de email não será publicado.