Angular 8 HTTP 拦截器中断订阅

Question

我试图建立一个 Angular 8 项目，允许我使用 HTTP 拦截器模拟 api 调用。基本思想是，如果我将 --configuration=mock 标志添加到我的 ng serve 脚本中，拦截器将被注入(inject)到我的 app.module 中，我将从 JSON 文件而不是外部 API 中获取数据。我或多或少地遵循这个例子，https://stackblitz.com/edit/angular-mock-http-interceptor出于某种原因，当我使用拦截器时，我的组件对数据服务的订阅被破坏了。据我所知，我正在模拟服务上构建与实时服务完全相同的数组。无法弄清楚为什么它会破裂。以下是来自服务的 getter 和 Observable:

getUsers() {
    this.http.get<any>('https://jsonplaceholder.typicode.com/users')
    .subscribe(fetchedUsers => {
      this.users = fetchedUsers;
      this.usersUpdated.next([...this.users]);
    });
  }

  getUsersUpdatedListener() {
    return this.usersUpdated.asObservable();
  }

调用服务的组件:

ngOnInit() {
    this.usersService.getUsers();
    this.usersSub = this.usersService.getUsersUpdatedListener()
    .subscribe((users: User[]) => {
      this.users = users;
    });
  }

最后是拦截器类:

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import * as users from '../../assets/mockData/users.json';

const urls = [
  {
      url: 'https://jsonplaceholder.typicode.com/users',
      json: users
  }
];


@Injectable()
export class HttpMockRequestInterceptor implements HttpInterceptor {
    constructor(private injector: Injector) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        for (const element of urls) {
            if (request.url === element.url) {
                console.log('Loaded from json : ' + request.url);
                return of(new HttpResponse({ status: 200, body: ((element.json) as any).default }));
            }
        }
        console.log('Loaded from http call :' + request.url);
        return next.handle(request);
    }
}

整个项目可以在这里查看: https://github.com/reynoldsblair/learn-http

为什么拦截器会破坏我的项目？

Answer 1

老兄，你的拦截器绝对没问题，我刚刚提取了你的项目及其 user-list.component.ts 这是错误的，你正在尝试订阅 this.usersService.getUsersUpdatedListener () 在 this.usersService.getUsers(); 触发后流，这让你有点竞争条件。在调用 getUsers 之前移动订阅逻辑解决了它并且每次都在 HttpRequestInterceptor 和 HttpMockRequestInterceptor

上工作

 ngOnInit() {
    this.usersSub = this.usersService.getUsersUpdatedListener()
      .subscribe((users: User[]) => {
        this.users = users;
      });
    this.usersService.getUsers();
  }