HttpInterceptor - развертывание ответа API - PullRequest
Новая
       6

HttpInterceptor - развертывание ответа API

0 голосов
/ 19 декабря 2018

Как развернуть ответ API с помощью HttpInterceptor?

Моя модель ответа API: 

export interface ApiResponse<T> {
   data: T;
   statusCode: number;
   errorMessage: string;
}

Чего я хотел бы добиться, чтобы последний перехватчик в моей цепочке перехватчиков возвращал только dataсвойство из приведенной выше модели. 

@Injectable()
export class UnwrapInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<any> {
    return next.handle(req).pipe(
      map(event => {
        if (event instanceof HttpResponse && event.url.match('/api/')) {
          console.log('Unwrapping data: ', event.body.data);
          return of(event.body.data);
        }
        return event;
      })
    );
  }
}

Я получил консольный журнал от перехватчика при запросе данных, но данные куда-то исчезли, и в итоге я ничего не получил в ответ.

Мой тестовый компонент, вызывающий APIпосле нажатия кнопки: 

@Component({ 
  selector: 'app-user-list-page',
  templateUrl: './user-list-page.component.html',
  styleUrls: ['./user-list-page.component.scss']
})
export class UserListPageComponent implements OnInit {
  userList: User[];

  constructor(private http: HttpService) {}

  ngOnInit() {}

  performRequest() {
    this.http.get<User[]>('/api/users').subscribe((data: User[]) => {    
      console.log('Received from component: ', data); <==+ never executed 
      return (this.userList = data);
    });
  }
}

HttpService в вышеуказанном компоненте просто вызывает Angular HttpClient.

Я использую Angular 7.1.0.

1 Ответ

0 голосов
/ 19 декабря 2018

Вместо того, чтобы просто возвращать наблюдаемые данные тела, вы все равно должны вернуть HttpResponse экземпляр, который просто содержит мутировавшее тело, например, путем клонирования ответа: 

if (event instanceof HttpResponse && event.url.match('/api/')) {
  console.log('Unwrapping data: ', event.body.data);
  event = event.clone({ body: event.body.data });
}
return event;
...