Как можно вернуть предопределенное значение из запроса http, если пользователь не в сети? (Угловой) - PullRequest
Новая
       5

Как можно вернуть предопределенное значение из запроса http, если пользователь не в сети? (Угловой)

0 голосов
/ 26 января 2019

Я бы хотел кешировать некоторые данные, которые запрашиваются с сервера. Я изменил запрос http следующим образом: 

// user.ts
export class User {
    id: number;
    name: string;
}

// inside the component:

getUsers() : Observable<User[]> {
    return this.http.get<User[]>(this.api+'/get-users').pipe(
        tap(users => {
            localStorage.setItem("cache_users", JSON.stringify(users));
        })
    );
}

Как можно загрузить пользователей из кеша, если запрос не выполнен из-за недоступности сервера?

Ответы [ 2 ]

0 голосов
/ 26 января 2019

Вы можете отловить ошибку, выданную после выполнения запроса, и вернуть кэш в случае, если ошибка была вызвана из-за состояния клиента в автономном режиме: 

import {of, throwError } from 'rxjs';
import {catchError} from 'rxjs/operators';
import {HttpErrorResponse} from '@angular/common/http';

getUsers() : Observable<User[]> {
    const url = `${this.api}/get-users`;
    return this.http.get<User[]>(url ).pipe(
        tap(users => localStorage.setItem(url , JSON.stringify(users))),
        catchError(error => {
          if(error instanceof HttpErrorResponse 
             && error.status=== 0
             && !error.url){
             // See https://stackoverflow.com/a/14507670/5394220
             // Try to read the local storage. If the key is not present, return an empty list
             const rawJson = localStorage.getItem(url);
             return of(!!rawJson ? JSON.parse(rawJson) : []);
          }
          // 
          return throwError(error);
        })
    );
}

Возможно, вы захотите попробовать другой подход, например, используя свойство window.navigator.onLine .

0 голосов
/ 26 января 2019

вы можете использовать catchError

catchError(() => of(localStorage.getItem("cache_users")));

getUsers() : Observable<User[]> {
    return this.http.get<User[]>(this.api+'/get-users').pipe(
        tap(users => {
            localStorage.setItem("cache_users", JSON.stringify(users));
        }),
        catchError(() => of(localStorage.getItem("cache_users")))
    );
}
...