Подтвердить что ты не робот

Почему finally() не работает после ловли на Observable в Angular 2?

Я пытаюсь добавить счетчик загрузки для каждого запроса, заканчивающегося на Angular 2, поэтому я расширил службу Http, назвав ее HttpService. После каждого запроса я хотел бы вызвать функцию finally() после обнаружения ошибок, чтобы я мог остановить загрузчик загрузки.

Но typescript говорит:

[ts] Свойство "finally" не существует в типе "Observable".

import { AuthService } from './../../auth/auth.service';
import { Injectable } from '@angular/core';
import { Http, XHRBackend, RequestOptions, RequestOptionsArgs, Request, Response, Headers } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class HttpService extends Http {

    constructor(
        backend: XHRBackend,
        options: RequestOptions,
        private authservice: AuthService
    ) {
        super(backend, options);
        this.updateHeaders(options.headers);
    }

    request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
        return super.request(url, options)
            .catch((response: Response) => this.authError(response))
            .finally(() => {
                // ...
                /* Do something here when request is done. For example
                finish a spinning loader. */
            });
    }

    private authError(response: Response) {
        if (response.status === 401 || response.status === 403) {
            this.authservice.logout();
        }
        return Observable.throw(response);
    }

    private updateHeaders(headers: Headers) {
        headers.set('Content-Type', 'application/json');
        if (this.authservice.isloggedIn()) {
            headers.set('Authorization', `Bearer ${this.authservice.getToken()}`);
        }        
    }
}

Как я могу запустить некоторый код после каждого HTTP-запроса, подобного этому? Каков наилучший способ сделать это?

4b9b3361

Ответ 1

Вы забыли его импортировать:

import 'rxjs/add/operator/finally';

Ответ 2

Главы, будущие читатели:

начиная с angular 6, который представил rxjs версию 6.0, теперь мы используем finalize вместо finally.

Теперь он используется внутри трубы, поэтому

observable.finally( x => console.log(x)).subscribe()

сейчас

observable().pipe( finalize( x => console.log(x))).subscribe()

и вы импортируете его из rxjs/operators

import { finalize } from 'rxjs/operators'