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

您不仅应该返回可观察到的主体数据，还应该返回一个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;

HttpInterceptor-展开API响应

1 个答案: