angular - 为什么 finally() 在捕捉到 Angular 2 中的 Observable 后不起作用?

标签 angular

我正在尝试为以 Angular 2 结尾的每个请求添加一个加载微调器,因此我扩展了 Http 服务,将其称为 HttpService。在每个请求之后,我想在捕获错误后调用 finally() 函数,以便我可以停止加载微调器。

但是 typescript 说:

[ts] Property 'finally' does not exist on type '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 请求后运行一些代码?最好的方法是什么?

最佳答案

你忘了导入它:

import 'rxjs/add/operator/finally';

关于angular - 为什么 finally() 在捕捉到 Angular 2 中的 Observable 后不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43876283/

相关文章:

javascript - 基于下拉值的 Angular 8 ngIf 表达式

javascript - 如何创建具有多个输入字段的 Angular 2 自定义组件

javascript - 与其他组件共享组件数据

json - 当 HttpClient 映射不会时,如何正确解析 TypeScript 类的 Date 对象?

angular - 如何查找已完成项目的总长度?

javascript - Binance API 和 angular 4 httpClient

angular - 如何检查来自父路由器或父路由器的事件子路由器?

javascript - 是否可以从 rxjs-timeout-error 中获取请求信息?

Angular 解析器获取 Observable

angular - 运行旧的 Angular 项目