Не могу использовать сервисы внутри функции catchError

Question

Я хочу иметь общий способ обработки исключений, особенно 401, полученных от бэкэнда. Когда я не извлекаю содержимое catchError, оно работает нормально. Однако, если я просто извлекаю его для определенной функции, то в эту функцию ничего не вставляется:

return this.http.request<T>(new HttpRequest('POST', this.appConfig.baseApiPath + url, file, {
            reportProgress: true,
            headers: headers,
            params: urlParams
        })).pipe(
            catchError((err) => {
                if (err.status === 401) {
                    this.router.navigateByUrl('/login?expired=true');
                }
                return Observable.throw(err || 'Server error')
            })
        );

Это работает! Однако я хотел обработать этот код перенаправления в функции, чтобы использовать его другими методами.

Здесь я экспортировал это в функцию:

    return this.http.request<T>(new HttpRequest('POST', this.appConfig.baseApiPath + url, file, {
        reportProgress: true,
        headers: headers,
        params: urlParams
    })).pipe(
        catchError(this.handleHttpError),
    );

handleHttpError(error: HttpErrorResponse) {
    if (error.status === 401) {
        this.router.navigateByUrl('/login?expired=true'); --> router is null!
    }
    return Observable.throw(error || 'Server error')
}

И в этом случае маршрутизатор (как и другие сервисы, внедренные в конструктор) не имеет значения, если я использую такой способ работы ... не могли бы вы подсказать, почему?

Answer 1

лучший подход - привязать 'this' к вашему звонку:

catchError(this.handleHttpError.bind(this))

Answer 2

Причина в том, что вы теряете контекст. Когда функция объявлена ​​таким образом, ключевое слово this относится к области действия функции, а не ко всему классу. Чтобы не потерять контекст, вы должны использовать функцию стрелки:

handleHttpError = (error: HttpErrorResponse) => {
    if (error.status === 401) {
        this.router.navigateByUrl('/login?expired=true');
    }
    return Observable.throw(error || 'Server error')
}