Angular中如何通過服務工作臺緩存外部資源

在Angular中，可以通過Angular的HttpClient模塊和服務工作臺配合實現緩存外部資源的功能。以下是一種實現方式：

1. 創建一個服務來處理外部資源的請求和緩存功能。例如，創建一個名為CacheService的服務。

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

@Injectable({
  providedIn: 'root'
})
export class CacheService {

  private cache: Map<string, Observable<any>> = new Map();

  constructor(private http: HttpClient) { }

  public get(url: string): Observable<any> {
    if (!this.cache.has(url)) {
      this.cache.set(url, this.http.get(url).pipe(shareReplay(1)));
    }
    return this.cache.get(url);
  }
}

2. 在組件中使用CacheService來獲取外部資源并進行緩存。

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

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="data$ | async as data">
      {{ data | json }}
    </div>
  `
})
export class ExampleComponent implements OnInit {

  data$: Observable<any>;

  constructor(private cacheService: CacheService) { }

  ngOnInit(): void {
    const url = 'https://api.example.com/data';
    this.data$ = this.cacheService.get(url);
  }
}

在上面的例子中，CacheService服務會緩存每個URL的響應數據，下次再請求相同的URL時，直接返回緩存的數據，而不會再次發起請求。這樣可以減少對外部資源的請求次數，并提高應用的性能。