Angular 8 HTTP INTERCEPTOR 中断订阅

Question

I trying to set up an Angular 8 project that allows me to mock api calls with HTTP INTERCEPTORS. The basic idea is if I add a --configuration=mock flag to my ng serve script the interceptor will be injected into my app.module and I'll get data from a JSON file rather than an external API. I'm more or less following this example, https://stackblitz.com/edit/angular-mock-http-interceptor For some reason when I use the interceptor my component's subscription to the data service is broken. As far as I can tell I'm building the exact same array on the mock service as I do with the live one. can't figure out why it's breaking. Here are the getter and the Observable from the service:

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();
  }

The component calling the service:

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

and finally the interceptor class:

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);
    }
}

The whole project can be viewed here: https://github.com/reynoldsblair/learn-http

Why is the interceptor breaking my project?

Answer 1

Dude your interceptor is absolutely fine i just pulled your project and its your user-list.component.ts which is wrong, you are trying to subscribe to the this.usersService.getUsersUpdatedListener() stream after this.usersService.getUsers(); fires which opens you up to a bit of a race condition. Moving the subscription logic before you call getUsers solved it and works every time on both HttpRequestInterceptor and HttpMockRequestInterceptor

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