Home Run Custom Functionality When Angular Http Errors Occur
Post
Cancel

Run Custom Functionality When Angular Http Errors Occur

Angular includes its own functionality for making HTTP requests. When using it, you may want to react to any errors that happen – perhaps to display an on-screen error message.

You can achieve that by extending Http.

custom-http.service.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Injectable } from '@angular/core';
import { ConnectionBackend, Http, Request, RequestOptions, RequestOptionsArgs, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';

@Injectable()
export class CustomHttpService extends Http {
  constructor(backend: ConnectionBackend, options: RequestOptions) {
    super(backend, options);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return super
      .request(url, options)
      .catch(err => {
        console.log(err); // Run any custom functionality here!

        return Observable.throw(err);
      });
  }
}

Now, use it in an NgModule:

app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Http, HttpModule, RequestOptions, XHRBackend } from '@angular/http';

import { AppComponent } from './app.component';

import { CustomHttpService } from './custom-http.service';

export function customHttpFactory(backend: XHRBackend, options: RequestOptions) {
  return new CustomHttpService(backend, options);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [
    {
      provide: Http,
      useFactory: customHttpFactory,
      deps: [XHRBackend, RequestOptions]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Let me know in the comments what you build with this!

This post is licensed under CC BY 4.0 by the author.

Comparing Angular NgModule and TestBed Side by Side

TypeScript Constructor Assignment: public and private Keywords

Comments powered by Disqus.