如何通过Angular CLI创建临时缓存文件以避免重复请求？

嘿，其实你完全没必要真的去创建物理JSON文件来做临时缓存——Angular本身就有更高效的方案来避免重复后端请求，同时支持新增数据时更新临时数据源。下面分几种常见场景给你一步步实现：

1. 内存缓存服务（临时存储，页面刷新即丢失） #

这是最常用的轻量方案，利用Angular的单例服务来存储数据，新增数据时同步更新缓存，后续请求优先读取缓存内容。

步骤1：创建缓存服务 #

// src/app/services/data-cache.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataCacheService {
  private cache: Record<string, any[]> = {}; // 用API路径作为键，存储对应的数据数组

  // 获取缓存数据
  getCachedData(key: string): any[] | null {
    return this.cache[key] ? [...this.cache[key]] : null; // 返回拷贝避免引用修改
  }

  // 初始化缓存数据
  setCachedData(key: string, data: any[]): void {
    this.cache[key] = [...data];
  }

  // 新增数据到缓存
  addToCache(key: string, newItem: any): void {
    if (!this.cache[key]) this.cache[key] = [];
    this.cache[key] = [...this.cache[key], newItem];
  }

  // 清空指定缓存
  clearCache(key: string): void {
    delete this.cache[key];
  }
}

步骤2：在数据服务中集成缓存 #

在你的业务数据服务里，先检查缓存，无缓存时再请求后端；新增数据后同步更新缓存：

// src/app/services/data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataCacheService } from './data-cache.service';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class DataService {
  private apiPath = 'api/items'; // 你的后端API路径

  constructor(
    private http: HttpClient,
    private cacheService: DataCacheService
  ) {}

  // 获取数据：优先读缓存，无缓存则请求后端并缓存
  getItems(): Observable<any[]> {
    const cachedData = this.cacheService.getCachedData(this.apiPath);
    if (cachedData) {
      return of(cachedData);
    }
    return this.http.get<any[]>(this.apiPath).pipe(
      switchMap(data => {
        this.cacheService.setCachedData(this.apiPath, data);
        return of(data);
      })
    );
  }

  // 新增数据：调用后端后同步更新缓存
  addItem(newItem: any): Observable<any> {
    return this.http.post<any>(this.apiPath, newItem).pipe(
      switchMap(createdItem => {
        this.cacheService.addToCache(this.apiPath, createdItem);
        return of(createdItem);
      })
    );
  }
}

2. 用LocalStorage持久化缓存（页面刷新不丢失） #

如果需要临时数据在页面刷新后依然保留，可以把缓存存在浏览器的LocalStorage中，只需修改缓存服务的读写逻辑：

// 修改DataCacheService中的方法
getCachedData(key: string): any[] | null {
  const storedData = localStorage.getItem(key);
  return storedData ? JSON.parse(storedData) : null;
}

setCachedData(key: string, data: any[]): void {
  localStorage.setItem(key, JSON.stringify(data));
}

addToCache(key: string, newItem: any): void {
  const currentData = this.getCachedData(key) || [];
  const updatedData = [...currentData, newItem];
  localStorage.setItem(key, JSON.stringify(updatedData));
}

3. 完全模拟后端API（官方InMemoryWebApiModule） #

如果你的需求是彻底替代后端请求，让所有HTTP请求都指向本地临时数据源，Angular官方的angular-in-memory-web-api是最佳选择——它会自动拦截HTTP请求，返回内存中的数据，新增/修改操作会直接更新内存数据源。

步骤1：安装依赖 #

npm install angular-in-memory-web-api --save

步骤2：创建内存数据服务 #

// src/app/services/in-memory-data.service.ts
import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';

@Injectable({ providedIn: 'root' })
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    // 初始化模拟数据，key要和你的API路径对应（比如/api/items会返回这个数组）
    const items = [
      { id: 1, name: '初始数据1' },
      { id: 2, name: '初始数据2' }
    ];
    return { items };
  }

  // 可选：自动生成新增数据的ID
  genId(items: any[]): number {
    return items.length > 0 ? Math.max(...items.map(item => item.id)) + 1 : 1;
  }
}

步骤3：在AppModule中配置启用 #

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './services/in-memory-data.service';

@NgModule({
  imports: [
    HttpClientModule,
    // 启用内存API，拦截所有HTTP请求
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService,
      { dataEncapsulation: false } // 禁用数据封装，和真实后端返回格式一致
    )
  ]
})
export class AppModule {}

现在你可以像正常调用后端API一样使用HttpClient，所有请求都会指向内存中的数据源，新增数据后后续请求会自动返回更新后的内容，完全不需要手动管理缓存！

4. 生成物理JSON文件（不刷新页面） #

如果你确实需要生成可下载的物理JSON文件（比如用户需要导出数据），可以用Blob API实现，全程不刷新页面：

// 在组件中添加生成文件的方法
generateTempJsonFile(data: any[]): void {
  const jsonString = JSON.stringify(data, null, 2); // 格式化JSON
  const blob = new Blob([jsonString], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  
  // 创建下载链接并触发点击
  const link = document.createElement('a');
  link.href = url;
  link.download = 'temp-data.json';
  document.body.appendChild(link);
  link.click();
  
  // 清理资源
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

调用这个方法就能直接生成并下载JSON文件，页面完全不会刷新。

内容的提问来源于stack exchange，提问作者Бекзат Сайлаубаев