Angular 8 HTTP INTERCEPTOR 中断订阅

Question

我试图建立一个 Angular 8 项目，允许我使用 HTTP 拦截器模拟 api 调用。基本思想是，如果我向我的 ng serve 脚本添加一个 --configuration=mock 标志，拦截器将被注入到我的 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.getUsers(); 触发后订阅 this.usersService.getUsersUpdatedListener() 流，这让你开始了一场比赛健康）状况。在调用 getUsers 之前移动订阅逻辑解决了它，并且每次都适用于 HttpRequestInterceptor 和 HttpMockRequestInterceptor

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