Angular5 HTTP服务结合IndexedDB离线存储：Observable<Response>与对象处理

嘿，这个需求我熟！咱们一步步来搞定它，既要实现网络可用时自动存数据到IndexedDB，又要处理好Observable和普通对象的转换问题。

第一步：确保你的IndexedDB服务支持普通对象存储 #

首先，假设你已经部署了基础的IndexedDB服务，咱们给它加一个通用的保存方法，用来接收普通对象并写入数据库：

import { Injectable } from '@angular/core';

@Injectable()
export class IndexedDbService {
  private db: IDBDatabase; // 假设你已经初始化好了这个DB实例

  // 保存数据到IndexedDB的方法，接受键名和普通对象
  saveData(storageKey: string, data: any): Promise<void> {
    return new Promise((resolve, reject) => {
      // 这里替换成你实际的对象仓库名称，比如'someDataStore'
      const transaction = this.db.transaction('someDataStore', 'readwrite');
      const store = transaction.objectStore('someDataStore');
      const request = store.put(data, storageKey);

      request.onsuccess = () => resolve();
      request.onerror = (error) => reject(`保存失败: ${error}`);
    });
  }
}

第二步：改造数据流，添加保存逻辑 #

Angular 5用的是RxJS 5.x版本，咱们可以用tap（旧版本叫do）操作符来添加副作用操作——也就是在不改变数据流的前提下，执行保存数据的动作。这样既不影响原来的业务逻辑，又能完成持久化。

方案一：在组件层处理（适合单一组件使用） #

直接在组件的订阅逻辑里加一段保存代码：

import { Component } from '@angular/core';
import { map, tap } from 'rxjs/operators'; // RxJS 5.5+支持pipeable操作符
import { DataService } from './data.service';
import { IndexedDbService } from './indexed-db.service';

@Component({
  selector: 'app-some-component',
  template: `<!-- 你的模板 -->`
})
export class SomeComponent {
  someVariable: any;

  constructor(
    private dataSvc: DataService,
    private indexedDbSvc: IndexedDbService
  ) {}

  fetchData() {
    this.dataSvc.getSomeData()
      .pipe(
        // 先把Observable<Response>转换成普通对象的Observable
        map(response => response.json()),
        // 添加保存到IndexedDB的副作用
        tap(data => {
          // 检查网络是否可用
          if (navigator.onLine) {
            this.indexedDbSvc.saveData('someDataKey', data)
              .catch(err => console.error('IndexedDB保存出错:', err));
          }
        })
      )
      .subscribe(
        data => this.someVariable = data,
        err => console.error('获取数据失败:', err)
      );
  }
}

方案二：在服务层封装（推荐，复用性更强） #

把保存逻辑封装到数据服务里，这样所有调用这个服务的组件都能自动享受到持久化功能：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { map, tap } from 'rxjs/operators';
import { IndexedDbService } from './indexed-db.service';

const SERVER_URL = '/api/some-data';

@Injectable()
export class DataService {
  constructor(
    private http: Http,
    private indexedDbSvc: IndexedDbService
  ) {}

  // 改造后的方法，直接返回普通对象的Observable
  getSomeData(): Observable<any> {
    return this.http.get(SERVER_URL)
      .pipe(
        map((response: Response) => response.json()),
        tap(data => {
          if (navigator.onLine) {
            this.indexedDbSvc.saveData('someDataKey', data)
              .catch(err => console.error('IndexedDB保存出错:', err));
          }
        })
      );
  }
}

这时组件里的代码就非常简洁了：

fetchData() {
  this.dataSvc.getSomeData()
    .subscribe(
      data => this.someVariable = data,
      err => console.error('获取数据失败:', err)
    );
}

关键细节说明 #

1. Observable转普通对象：通过map(response => response.json())把HTTP响应转换成普通JSON对象，后续的tap和subscribe拿到的都是这个普通对象，直接传给IndexedDB服务就行，不用额外处理类型问题。
2. 网络状态判断：用浏览器原生的navigator.onLine API判断网络是否可用，这个API在大部分场景下都能满足需求，如果需要更精确的判断，可以结合HTTP请求的状态码来补充。
3. 副作用不影响主流程：用tap操作符执行保存逻辑，就算保存失败，也不会打断原来的数据订阅流程，避免影响页面渲染。

内容的提问来源于stack exchange，提问作者Stephen R. Smith