Bdtjtk

When I use a not-pre-defined http request in Angular (7), I got response 2 times in my subscribe body, but if I use a pre-define http request like GET, there is only 1 response.

A custom request (SEARCH) in service:

  searchFileByCategory(categories: Array<string>): Observable<any> {

    return this.http.request(new HttpRequest('SEARCH', ENDPOINTS.SEARCH_FILE_BY_CATEGORY, {categories: categories}));

  }

In component:

  refreshTable(): void {

    this.backEndService.searchFileByCategory(this.categories).subscribe(event => {

      console.log(event);

      if (event.type === HttpEventType.Response) {

        this.files = event.body.data;

      }

    });

  }

1st event log:

{type: 0}

2nd event log:

{body: {data: {…}}

headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}

ok: true

status: 200

statusText: "OK"

type: 4

url: "http://localhost/..."}

As you can see I have to check (event.type === HttpEventType.Response) because event.body.data doesn't exist in the 1st response.

HttpEventType enum in node_modules@angularcommonhttpsrcresponse.d.ts:

export declare enum HttpEventType {

    /**

     * The request was sent out over the wire.

     */

    Sent = 0,

    /**

     * An upload progress event was received.

     */

    UploadProgress = 1,

    /**

     * The response status code and headers were received.

     */

    ResponseHeader = 2,

    /**

     * A download progress event was received.

     */

    DownloadProgress = 3,

    /**

     * The full response including the body was received.

     */

    Response = 4,

    /**

     * A custom event from an interceptor or a backend.

     */

    User = 5

}

I have understood what the 1st response is. But I don't understand the reason why GET does not have the same.

A GET request in service:

  getZipCodes(): Observable<any> {

    return this.http.get(ENDPOINTS.GET_ZIP_CODES);

  }

In component:

  refreshZipCodes(): void {

    this.backEndService.getZipCodes().subscribe(response => this.zipCodes = response.data)

  }

Here there is no need for checking (event.type === HttpEventType.Response). Why?

My final purpose is to get rid of checking (event.type === HttpEventType.Response) every time when I call a custom http request. How can I do it?

@ABOS's answer under the post looks good, it works:

  searchLastContentByCategory(category: string): Observable<any> {

    return this.http.request(new HttpRequest('SEARCH', ENDPOINTS.SEARCH_LAST_CONTENT_BY_CATEGORY, {category: category}))

      .pipe(filter((event: HttpEvent<any>) => event instanceof HttpResponse));

  }