Angular 5 - 如何做类似finally块的事情？

Question

我正在使用 Angular 5 编写一个应用程序，在我的 http 调用之后，某些功能具有类似 finally 块的内容很重要。

我不确定如何使用 Observables 执行此操作，因为 Observable 中没有 finally 函数：http://xgrommx.github.io/rx-book/content/observable/observable_methods/index.html

code snippet:
getInfo() {

    const params = new HttpParams()
        .set('username', 'swapp')
        .set('password', "test");

    return this.http
        .get('myurl', {params: params})
        .catch(this.errorHandler);
}

Answer 1

我找到了一种将 finally 块添加到 Observable 的方法。

导入'rxjs/add/operator/finally';

    return this.http
        .get(CONSTANT.ENV.prod.url.concat(endpoint), {params: params})
        .catch(this.errorHandler)
        .finally(this.handleFinally)

Answer 2

您可以为此使用intercepter：

http_intercepter.ts：

import { Injectable, Injector } from '@angular/core';

import {
    HttpEvent,
    HttpHeaders,
    HttpInterceptor,
    HttpResponse,
    HttpErrorResponse,
    HttpHandler,
    HttpRequest
} from '@angular/common/http';


import { AppService } from './../app.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';


@Injectable()
export class MyInterceptor implements HttpInterceptor {

    constructor(
        private appService: AppService,
        ) {

    }

    /**
     * 
     * @param req - parameter to handle http request
     * @param next - parameter for http handler
     */
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const started = Date.now();
        /**
         * Handle newly created request with updated header (if given)
         */
        return next.handle(req).do((event: HttpEvent<any>) => {
            /**
             * Sucessfull Http Response Time.
             */
            if (event instanceof HttpResponse) {
                const elapsed = Date.now() - started;
            }

        }, (err: any) => {
            /**
             * redirect to the error_handler route according to error status or error_code
             * or show a modal
             */
            if (err instanceof HttpErrorResponse) {
                switch (err.status) {
                    case 400:
                        console.log("400 type")
                        break;
                    case 401:
                        console.log("401 type")
                        break;
                    case 404:
                        console.log("404 type");
                        break;
                    default:
                        break;
                }
            }
        });
    }

}

app.module.ts:

providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MyInterceptor,
            multi: true,
        },
    ]

Answer 3

正如@UnluckyAj 所说，您可以将 catch http 失败集中在 INTERCEPTORS 中，或者如果您想在每次调用中进行精细处理，请尝试以下操作：

getInfo() {

const params = new HttpParams()
    .set('username', 'swapp')
    .set('password', "test");

return this.http
    .get('myurl', {params: params})
    .subscribe(this.onsuccessHandler,this.errorHandler); // FIRST function is for success SECOND for failure

}

如果你想要一个 finally 块试试：

return Observable.defer(() => {


    const params = new HttpParams()
        .set('username', 'swapp')
        .set('password', "test");



       return this.http
            .get('myurl', {params: params})
            .subscribe(this.onsuccessHandler,this.errorHandler);
            .finally(() => {}               
            );