Capture requests globally in angular 4 and stop if no internet

Question

I can get the connection status using window.navigator.onLine and using the HttpInterceptor as mentioned below i can get access to requests globally. But how do i cancel a request inside the HttpInterceptor? Or else is there a better way to handle this?

import { Injectable } from '@angular/core';
import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class InternetInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        //check to see if there's internet
        if (!window.navigator.onLine) {
            return //cancel request
        }
        //else return the normal request
        return next.handle(request);
    }
}

You can use request.unsubscribe(); to cancle the http request. — Amit, Oct 18 '17 at 06:07
That you have to do it in each and every place that's the problem — Lakshin Karunaratne, Oct 18 '17 at 11:03

score 11 · Accepted Answer · answered Mar 29 '18 at 04:35

You were very close to the answer.

import { Injectable } from '@angular/core';
import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class InternetInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // check to see if there's internet
        if (!window.navigator.onLine) {
            // if there is no internet, throw a HttpErrorResponse error
            // since an error is thrown, the function will terminate here
            return Observable.throw(new HttpErrorResponse({ error: 'Internet is required.' }));

        } else {
            // else return the normal request
            return next.handle(request);
        }
    }
}

score 0 · Answer 2 · answered Feb 08 '18 at 10:21

import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class InternetInterceptor implements HttpInterceptor {
constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(request).do((event: any) => {
        //
    }).catch(response => {
       //if (response instanceof HttpErrorResponse) {
       //check to see if there's internet
         if (!window.navigator.onLine) {
           return //cancel request
         }
       //}
       return Observable.throw(response);
    });
  }
}

This doesn't really handle what the question asks for because it will always send a request to the server - which no matters what will invoke `catch` when there is no internet. By the time you check for network status, the request has ended. — Joyce, Mar 29 '18 at 04:14

Capture requests globally in angular 4 and stop if no internet

2 Answers2

Linked