HttpInterceptor - 展开 API 响应

Question

如何使用 HttpInterceptor 解包 API 响应？

我的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.

Answer 1

而不是仅仅 return 观察 body 数据，你仍然应该 return 一个 HttpResponse 实例，它只包含一个变异的 body ，例如通过克隆响应：

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

HttpInterceptor - 展开 API 响应

HttpInterceptor - unwrapping API response

angular-http-interceptors

angular