如果用户离线，如何从http请求中返回预定义的值？ （角度）

Question

我想缓存一些从服务器请求的数据。我这样修改了http请求：

all

如果由于服务器无法访问而导致请求失败，如何从缓存中加载用户？

Answer 1

您可以使用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")))
    );
}

Answer 2

一旦错误是由于客户端脱机状态引起的，您可以捕获请求后抛出的错误并返回缓存：

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属性。