How should I modify the response to an HTTP request and easily access it before return it out from Observable?

Question

I\'m upgrading to Angular to version 5, I was using @angular/http before and now I need to update to @angular/common/http and use HttpClient

I a

Answer 1

If you want to handling errors more efficiently, i writting below codes and error classes, please notice to the each part:

1. I make a folder errors and inside this folder make a class for each of errors, these errors can be 500 errors or 400 errors like blew image:

2. Make a class app-error.ts like below codes:

   export class AppError {
       constructor(public originalError?: any) { }
   }
   

3. Another error classes extends from app-error.ts class:

   // not-found-error.ts class
   import {AppError} from './app-error';
   
   export class NotFoundError extends AppError { }
   
   
   
   // conflict-error.ts class
   import {AppError} from './app-error';
   
   export class ConflictError extends AppError { }
   
   
   
   // internal-server-error.ts class
   import {AppError} from './app-error';
   
   export class InternalServerError extends AppError { }
   
   
   
   // bad-request-error.ts class
   import {AppError} from './app-error';
   
   export class BadRequestError extends AppError {
       constructor(public originalError?: any) {
           super(originalError);
       }
   
       get errors(): string[] {
           if (this.originalError)
               return this.originalError;
   
           return null;
       }
   }
   

4. If you want to access to base error or you can modify error, i do it inside latest class bad-request-error.ts

5. Then you can use these classes inisde service:

   import {Injectable} from '@angular/core';
   import {HttpClient} from '@angular/common/http';
   import {HttpHeaders} from '@angular/common/http';
   
   import {Observable} from 'rxjs/Observable';
   import 'rxjs/add/operator/map';
   import 'rxjs/add/operator/catch';
   import 'rxjs/add/observable/throw';
   
   import {AppError} from '../errors/app-error';
   import {BadRequestError} from '../errors/bad-request-error';
   import {NotFoundError} from '../errors/not-found-error';
   import {InternalServerError} from '../errors/internal-server-error';
   import {ConflictError} from '../errors/conflict-error';
   
   @Injectable()
   export class DataService {
       public headers = new HttpHeaders().set('Content-Type', 'application/json');
   
       constructor(public http: HttpClient, public url: string) { }
   
       get(id: number) {
           return this.http.get(`${this.url}/${id}`, {headers: this.headers})
                  .map((response) => response.json())
                  .catch(DataService.handleError);
       }
   
       create(resource) {
           return this.http.post(this.url, JSON.stringify(resource), {headers: this.headers})
                  .map((response) => response.json())
                  .catch(DataService.handleError);
       }
   
       update(id: number, resource) {
           return this.http.put(`${this.url}/${id}`, JSON.stringify(resource), {headers: this.headers})
                  .map((response) => response.json())
                  .catch(DataService.handleError);
       }
   
       remove(id: number) {
           return this.http.delete(`${this.url}/${id}`, {headers: this.headers})
                  .map((response) => response.json())
                  .catch(DataService.handleError);
       }
   
       public static handleError(error: Response) {
           switch (error.status) {
               case 400:
                   return Observable.throw(new BadRequestError(error));
               case 404:
                   return Observable.throw(new NotFoundError());
               case 409:
                   return Observable.throw(new ConflictError());
               case 500:
                   return Observable.throw(new InternalServerError());
   
               default:
                   return Observable.throw(new AppError(error));
           }
       }
   }
   

6. Above code is the best code for error handling and using map operator for manipulating response in success manner.

7. And the latest pace is using service inside component like below code:

   import {Component} from '@angular/core';
   import {OnInit} from '@angular/core';
   import {HttpParams} from '@angular/common/http';
   
   import {DataService} from '../../services/data.service';
   
   import {AppError} from '../errors/app-error';
   import {BadRequestError} from '../errors/bad-request-error';
   import {NotFoundError} from '../errors/not-found-error';
   import {InternalServerError} from '../errors/internal-server-error';
   import {ConflictError} from '../errors/conflict-error';
   
   @Component({
       selector: 'app-data',
       templateUrl: './data.component.html',
       styleUrls: ['./data.component.css']
   })
   export class DataComponent implements OnInit {
   
       constructor(private dataService: DataService) {
       }
   
       ngOnInit() {
           this.dataService.get(123).subscribe(
               (response: DataModel) => {
                   // ...
               },
               (error: AppError) => {
                   if (error instanceof NotFoundError) {
                       // ...
                   } else if (error instanceof BadRequestError) {
                       // ...
                   } else if (error instanceof ConflictError) {
                       // ...
                   } else {
                       // ...
                   }
               }
           );
       }
   }