Question

我正在使用Angular 5.0.0。

我有一个下拉菜单，该菜单由来自远程服务器的数据填充。此下拉数据是在页面上多次使用的组件的一部分。因此，每次使用组件时，都会从服务器检索数据。我希望它一次检索数据，缓存它，然后在之后使用每个实例的缓存值。

我遵循Angular 5 documentation中的一般模式和this StackOverflow answer中的具体细节。这是我的拦截器：

@Injectable()
export class CachingInterceptor implements HttpInterceptor {
  private cache = {};

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.method !== 'GET') {
      return next.handle(req);
    }

    console.log("Checking cache for "+req.urlWithParams);
    const cachedResponse = this.cache[req.urlWithParams] || null;
    if (cachedResponse) {
        console.log("Returning cached version of "+req.urlWithParams);
        return Observable.of(cachedResponse);
    }

    return next.handle(req).do(event => {
        if (event instanceof HttpResponse) {
            console.log("Setting the cache value for "+req.urlWithParams);
            this.cache[req.urlWithParams] = event;
        }
    });
  }
}

拦截器已经正确注入它会出现，但这是控制台中发生的事情：

Checking cache for api/proposal-statuses
Checking cache for api/proposal-statuses
Checking cache for api/proposal-statuses
Checking cache for api/proposal-statuses
...
GET XHR http://localhost:4200/api/proposal-statuses
GET XHR http://localhost:4200/api/proposal-statuses
GET XHR http://localhost:4200/api/proposal-statuses
GET XHR http://localhost:4200/api/proposal-statuses
...
Setting the cache value for api/proposal-statuses
Setting the cache value for api/proposal-statuses
Setting the cache value for api/proposal-statuses
Setting the cache value for api/proposal-statuses
...

我期望看到的是：

Checking cache for api/proposal-statuses
GET XHR http://localhost:4200/api/proposal-statuses
Setting the cache value for api/proposal-statuses
Returning cached version of api/proposal-statuses
Returning cached version of api/proposal-statuses
Returning cached version of api/proposal-statuses
Returning cached version of api/proposal-statuses
...

我检索数据的服务是：

import { Injectable } from '@angular/core';
import { ProposalStatus } from './proposal-status';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ProposalStatusService {
  private serviceUrl = 'api/proposal-statuses';  // URL to web api

  constructor(private http: HttpClient) { }

  getAllProposalStatuses(): Observable<ProposalStatus[]> {
    return this.http.get<ProposalStatus[]>(this.serviceUrl);
  }
}

然后在组件中，这就是调用服务的方式：

@Component({
  selector: 'proposal',
  templateUrl: './proposal.component.html',
  styleUrls: ['./proposal.component.scss']
})
export class ProposalComponent implements OnInit {
    ...

    statusdata: Observable<ProposalStatus[]>;

    constructor(private proposalStatusService: ProposalStatusService,
                ...) { }

    ngOnInit() {
        this.statusdata = this.proposalStatusService.getAllProposalStatuses();
        ...
    }
}

为什么我没有得到我期望的结果？这种行为发生在一切，而不仅仅是这个特定的服务。任何见解都会有所帮助。谢谢！

Angular 5 http拦截器没有按预期缓存

0 个答案: