Angular 5中HTTP请求缓存实现方法及跨API缓存错误排查

嘿，这个问题我太熟了！你现在的缓存服务肯定是踩了「单一变量存所有缓存」的坑——不管请求的是API1还是API2，都往同一个countries变量里塞数据、取数据，自然会串味儿啦！

问题根源 #

你的缓存服务没有区分不同的API请求标识，所有请求都共用同一个缓存容器（也就是那个countries变量）。当你第一次请求API1时，数据存在了countries里；后续请求API2时，服务依然会检查countries是否有值——这时候它已经有API1的数据了，就直接返回旧数据，根本不会发起新的HTTP请求。

解决方案：用键值对存储缓存 #

我们需要给每个API请求分配独立的缓存条目，最方便的方式是用URL作为缓存的键，把对应的数据作为值，用Map或者普通对象来存储这些键值对。

修正后的缓存服务代码 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class CacheService {
  // 用Map存储缓存，键是API的完整URL，值是对应返回的数据
  private cacheStore = new Map<string, any>();

  constructor(private http: HttpClient) {}

  // 通用的缓存请求方法，接收目标API的URL作为参数
  getCachedData(url: string): Observable<any> {
    // 先检查缓存中是否存在该URL的数据
    if (this.cacheStore.has(url)) {
      console.log(`📦 从缓存加载数据: ${url}`);
      return of(this.cacheStore.get(url));
    }

    // 缓存不存在时，发起HTTP请求并将结果存入缓存
    return this.http.get(url).pipe(
      tap(data => {
        console.log(`💾 缓存新数据: ${url}`);
        this.cacheStore.set(url, data);
      })
    );
  }

  // 可选：添加清空指定缓存的方法
  clearCache(url: string): void {
    this.cacheStore.delete(url);
  }

  // 可选：添加清空所有缓存的方法
  clearAllCache(): void {
    this.cacheStore.clear();
  }
}

组件中的调用方式 #

现在不管你请求哪个API，只要传入不同的URL，缓存就会独立存储：

import { Component, OnInit } from '@angular/core';
import { CacheService } from '../cache.service';

@Component({
  selector: 'app-caching-demo',
  templateUrl: './caching-demo.component.html'
})
export class CachingDemoComponent implements OnInit {
  api1Data: any;
  api2Data: any;

  constructor(private cacheService: CacheService) {}

  ngOnInit() {
    // 请求API1，首次请求会缓存，后续直接取缓存
    this.cacheService.getCachedData('https://your-domain.com/api1').subscribe(data => {
      this.api1Data = data;
    });

    // 请求API2，会独立发起请求并缓存，不会和API1的数据混淆
    this.cacheService.getCachedData('https://your-domain.com/api2').subscribe(data => {
      this.api2Data = data;
    });
  }
}

额外优化建议 #

• 添加缓存过期机制：如果你的数据需要定期更新，可以给每个缓存条目加上过期时间，在获取缓存时先检查是否过期，过期则重新请求。
• 支持请求参数区分：如果同一个URL但不同查询参数（比如/api/users?page=1和/api/users?page=2）需要独立缓存，可以把完整的请求URL（包括查询参数）作为缓存键。

内容的提问来源于stack exchange，提问作者james bond