升级至Ionic 4与Angular 7后，GET请求timeout和catchError报错求助

Hey there! The issues you're seeing are due to the RxJS 6+ changes that come with Angular 7. RxJS 6 completely revised how operators are used—they're now "pipeable" instead of being methods directly called on Observable instances. Let's fix these two errors one by one:

1. Fix the timeout error #

In RxJS 6+, timeout is no longer a method you chain directly onto the Observable. Instead, you import it from rxjs/operators and use it inside the pipe() method alongside other operators.

2. Fix the catchError error #

catchError replaces the old .catch() method from earlier RxJS versions, and it also needs to be imported from rxjs/operators. Additionally, you’re currently calling this.errorHandler() immediately (with parentheses), which is incorrect—you need to pass a function reference (or use an arrow function to preserve the this context for your service/component).

Step-by-Step Corrections: #

First, update your imports at the top of your component/service file:

import { Observable, throwError } from 'rxjs';
import { catchError, timeout } from 'rxjs/operators';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

Then, adjust your GET request code to use pipeable operators correctly:

if (params.method == 'GET') {
  return this.http.get(url, {
    headers: headers,
    params: request_params,
    withCredentials: true
  }).pipe(
    timeout(10000), // Move timeout inside the pipe() method
    catchError((error: HttpErrorResponse) => this.errorHandler(error)) // Use arrow function to preserve 'this' context
  );
}

Notes on errorHandler: #

Make sure your errorHandler method is set up to handle the error and return an Observable (typically using throwError to propagate the error downstream):

private errorHandler(error: HttpErrorResponse): Observable<never> {
  // Your custom error logic here (log the error, send notifications, etc.)
  console.error('Request failed:', error.message);
  // Return an observable with a user-friendly error message
  return throwError('Something went wrong; please try again later.');
}

Using the arrow function in catchError((error) => this.errorHandler(error)) ensures that this refers to your service/component instance when errorHandler runs. Alternatively, you could bind this directly: catchError(this.errorHandler.bind(this)).

That should resolve both of your errors!

内容的提问来源于stack exchange，提问作者alim1990