Angualar HttpInterceptor: почему не могу получить response?

Question

[No Name]

Есть класс интерсептора:

import {
  HttpRequest, 
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HTTP_INTERCEPTORS
} from '@angular/common/http';

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import { messages } from 'src/fake-backend/data/messages/messages';

@Injectable()
export class FakeBackendInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    console.log('HTTP REQUEST INTERCEPTED BY THE MOCKED BACKEND');

    const duplicate = req.clone({ body: {data: messages} });

    return next.handle(duplicate);
  }
}

Этот интерсептор я в прописал в провайдерах в app.module.ts

providers: [
    { provide: HTTP_INTERCEPTORS, useClass: FakeBackendInterceptor, multi: true }
  ],

Вот сервис из которого делается запрос:

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

  constructor(
    private http: HttpClient
  ) { }

  getMessages(): Observable<Message[]> {
    return this.http.get('/messages')
      .map((messages: Message[]) => {
        console.log('MessageService : getMessages : ', messages);
        return messages;
      });
  }
}

В компоненте вызываю метод сервиса:

this.messageService.getMessages()
      .subscribe(messages => {
        console.log('ChatComponent : getMessages : ', messages);
      });

Метод вызывается, интесептор перехватывает запрос, console.log() в интерсепторе срабатывает, но в консоль выводится ошибка 404: https://prnt.sc/jv0lpu

Как сделать, чтобы интерсептор возвращал ответ с данными?

Answer 1

[Demian Smith]

В коде интерсептора перепутан респонз и реквест.

Что сейчас происходит:

1. Интерсептор перехватывает объект реквеста
2. Интерсептор добавляет в реквест { body: {data: messages} }
3. Интересептор передаёт реквест дальше на обратоку

Я так понимаю, идея интерсептора в том, чтоб ловить реквест и вместо передачи реквеста дальше на обратоку, возвращать ответ.

Попробуйте как-то так:

import {
  HttpRequest, 
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HTTP_INTERCEPTORS
} from '@angular/common/http';

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import { messages } from 'src/fake-backend/data/messages/messages';

import { of } from 'rxjs/observable/of';

@Injectable()
export class FakeBackendInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    console.log('HTTP REQUEST INTERCEPTED BY THE MOCKED BACKEND');

    return of(new HttpResponse({body: {data: messages}}));
  }
}

Comments

[No Name]

Спасибо! Наверное, это и есть решение, доберусь до кода, попробую.

[No Name]

Спасибочки огромное :) это работает