Question

我正在尝试向每个以Angular 2结尾的请求添加一个加载微调器，所以我扩展了Http服务，调用它为HttpService。在每次请求之后，我想在捕获错误后调用finally（）函数，以便我可以停止加载微调器。

但是打字稿说：

[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请求后运行一些代码？这样做的最佳方式是什么？

Answer 1

您忘了导入它：

function loadVegetables() {
    var veggies = [
        {"Name":"C50","Description":"Malignant neoplasm of breast"},{"Name":"C50.0","Description":"Malignant neoplasm of nipple and areola"},{"Name":"C50.01","Description":"Malignant neoplasm of nipple and areola, female"},{"Name":"C50.011","Description":"Malignant neoplasm of nipple and areola, right female breast"},{"Name":"C50.012","Description":"Malignant neoplasm of nipple and areola, left female breast"},{"Name":"C50.019","Description":"Malignant neoplasm of nipple and areola, unspecified female breast"},{"Name":"C50.02","Description":"Malignant neoplasm of nipple and areola, male"},{"Name":"C50.021","Description":"Malignant neoplasm of nipple and areola, right male breast"},{"Name":"C50.022","Description":"Malignant neoplasm of nipple and areola, left male breast"},{"Name":"C50.029","Description":"Malignant neoplasm of nipple and areola, unspecified male breast"}
    ];

    return veggies.map(function (veg) {
        veg._lowername = veg.Name.toLowerCase();
        veg._lowertype = veg.Description.toLowerCase();
        return veg;
    });
}

Answer 2

注意，将来的读者：

自从angular 6开始引入了rxjs 6.0版，我们现在使用 finalize （而不是最终）。

现在已在管道中使用，所以

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

现在是

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

，然后从rxjs/operators

导入

import { finalize } from 'rxjs/operators'

为什么在Angular 2中捕获一个Observable后finally（）不起作用？

2 个答案: