Вопрос:

Захват запросов по всему миру в угловых 4 и остановить, если нет интернета

angular internet-connection angular-http-interceptors

3096 просмотра

3 ответа

181 Репутация автора

Я могу получить статус соединения, используя window.navigator.onLineи используя HttpInterceptor, как упомянуто ниже, я могу получить доступ к запросам по всему миру. Но как мне отменить запрос внутри HttpInterceptor? Или есть лучший способ справиться с этим?

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);
    }
}
Автор: Lakshin Karunaratne Источник Размещён: 18.10.2017 05:45

Ответы (3)


0 плюса

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);
    });
  }
}
Автор: Beller Размещён: 08.02.2018 10:21

6 плюса

312 Репутация автора

Решение

Вы были очень близки к ответу.

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);
        }
    }
}
Автор: Joyce Размещён: 29.03.2018 04:35

0 плюса

189 Репутация автора

если команда ниже не работает

window.navigator.onLine

Вы можете попробовать это: (сначала я написал приватный метод с именем isOnline, чтобы проверить подключение к интернету или нет)

@Injectable()
export class InternetInterceptorService implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(tap(event => {
      this.isOnline(() => {
        alert("Your are lost your internet connection. Please check your connection ...");
        return Observable.throw(new HttpErrorResponse({ error: 'Internet is required.' }));
      }, () => {
        return next.handle(req);
      })
    }, error => {
    }));
  }



  private isOnline(no, yes) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
      if (yes instanceof Function) {
        yes();
      }
    }
    xhr.onerror = function () {
      if (no instanceof Function) {
        no();
      }
    }
    xhr.open("GET", "https://example.com/", true);
    xhr.send();
  }

}

затем зарегистрируйте этот перехватчик в разделе провайдеров:

  ...
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: InternetInterceptorService,
     multi: true
  }]
  ...
Автор: AbolfazlR Размещён: 11.08.2019 07:46
Вопросы из категории :
32x32