web-dev-qa-db-ja.com

angular2のhttpinterceptorと同等のものは何ですか？

Angularjsには、httpインターセプターがあります

$httpProvider.interceptors.Push('myHttpInterceptor');

すべてのhttp呼び出しにフックし、読み込みバーを表示または非表示にしたり、ロギングを実行したりできます。

Angle2の同等のものは何ですか？

httpangular
55
Vikram Babu Nagineni

@Günterが指摘したように、インターセプターを登録する方法はありません。 Httpクラスを拡張し、HTTP呼び出しに傍受処理を配置する必要があります

最初に、Httpを拡張するクラスを作成できます。

@Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    return super.request(url, options).catch(res => {
      // do something
    });        
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    console.log('get...');
    return super.get(url, options).catch(res => {
      // do something
    });
  }
}

以下の説明に従って登録します。

bootstrap(AppComponent, [HTTP_PROVIDERS,
    new Provider(Http, {
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
      deps: [XHRBackend, RequestOptions]
  })
]);

requestおよびrequestErrorの種類は、ターゲットメソッドを呼び出す前に追加できます。

response oneの場合、いくつかの非同期処理を既存の処理チェーンにプラグインする必要があります。これは必要に応じて異なりますが、Observableの演算子（flatMapなど）を使用できます。

最後に、responseErrorの1つについて、ターゲット呼び出しでcatch演算子を呼び出す必要があります。これにより、応答でエラーが発生したときに通知されます。

このリンクはあなたを助けることができます：

63
Thierry Templier

update

Angular 4.3.0で導入された新しいHttpClientモジュールはインターセプターをサポートします https：//github.com/angular/angular/compare/4.3.0-rc.0 ... 4.3.

feat（common）：新しいHttpClient API HttpClientは、既存のAngular HTTP APIの進化版であり、別のパッケージ、@ angular/common/http。この構造により、既存のコードベースをゆっくりと新しいAPIに移行できます。

新しいAPIは、従来のAPIの人間工学と機能を大幅に改善します。新機能の部分的なリストには以下が含まれます。

  • JSONボディタイプのサポートを含む、型付きの同期レスポンスボディアクセス
  • JSONは想定されるデフォルトであり、明示的に解析する必要がなくなりました
  • インターセプターにより、ミドルウェアロジックをパイプラインに挿入できます
  • 不変の要求/応答オブジェクト
  • 要求のアップロードと応答のダウンロードの両方の進行イベント
  • リクエスト後の検証とフラッシュベースのテストフレームワーク

オリジナル

Angular2には（まだ）インターセプターがありません。代わりに、Http、XHRBackend、BaseRequestOptions、または他の関連クラス（少なくともTypeScriptおよびDart（プレーンJSについては知らない）のいずれか）を拡張できます。

こちらもご覧ください

18
Günter Zöchbauer

このリポジトリには、Http @ angular/core-likeサービスの実装があります。 https://github.com/voliva/angular2-interceptors

ブートストラップでそのサービスのプロバイダーを宣言し、必要なインターセプターを追加するだけで、すべてのコンポーネントで利用可能になります。

import { provideInterceptorService } from 'ng2-interceptors';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    HttpModule
  ],
  providers: [
    MyHttpInterceptor,
    provideInterceptorService([
      MyHttpInterceptor,
      /* Add other interceptors here, like "new ServerURLInterceptor()" or
         just "ServerURLInterceptor" if it has a provider */
    ])
  ],
  bootstrap: [AppComponent]
})
12
olivarra1

非推奨Angular 4.3（HttpInterCeptorsは4.3に戻りました）

独自のカスタムHTTPクラスを作成し、rxjs Subject Serviceを使用してカスタムHttpクラスを再利用し、カスタムクラスに動作を実装できます。

Rxjsサブジェクトを含む「HttpSubjectService」を使用したカスタムHttpクラスの実装。

import { Injectable } from '@angular/core';
import { Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';


import { HttpSubjectService } from './httpSubject.service';


@Injectable()
export class CustomHttp extends Http {
   constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private httpSubjectService: HttpSubjectService) {
       super(backend, defaultOptions);

       //Prevent Ajax Request Caching for Internet Explorer
       defaultOptions.headers.append("Cache-control", "no-cache");
       defaultOptions.headers.append("Cache-control", "no-store");
       defaultOptions.headers.append("Pragma", "no-cache");
       defaultOptions.headers.append("Expires", "0");
   }

   request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
       //request Start;
       this.httpSubjectService.addSpinner();
       return super.request(url, options).map(res => {
           //Successful Response;
           this.httpSubjectService.addNotification(res.json());
           return res;
       })
           .catch((err) => {
               //Error Response.
               this.httpSubjectService.removeSpinner();
               this.httpSubjectService.removeOverlay();

               if (err.status === 400 || err.status === 422) {
                   this.httpSubjectService.addHttp403(err);
                   return Observable.throw(err);
               } else if (err.status === 500) {
                   this.httpSubjectService.addHttp500(err);
                   return Observable.throw(err);
               } else {
                   return Observable.empty();
               }
           })
           .finally(() => {
               //After the request;
               this.httpSubjectService.removeSpinner();
           });
   }
}

CustomHttpクラスを登録するカスタムモジュール-ここでは、AngularからのデフォルトのHttp実装を独自のCustomHttp実装で上書きします。

import { NgModule, ValueProvider } from '@angular/core';
import { HttpModule, Http, XHRBackend, RequestOptions } from '@angular/http';

//Custom Http
import { HttpSubjectService } from './httpSubject.service';
import { CustomHttp } from './customHttp';

@NgModule({
    imports: [ ],
    providers: [
        HttpSubjectService,
        {
           provide: Http, useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, httpSubjectService: HttpSubjectService) => {
                return new CustomHttp(backend, defaultOptions, httpSubjectService);
            },
            deps: [XHRBackend, RequestOptions, HttpSubjectService]
        }
    ]
})
export class CustomHttpCoreModule {

    constructor() { }
}

次に、「next」ステートメントで呼び出されたときにrxjsサブジェクトにSubScribeできるHttpSubjectService実装が必要です。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class HttpSubjectService {
    //https://github.com/ReactiveX/rxjs/blob/master/doc/subject.md
    //In our app.component.ts class we will subscribe to this Subjects
    public notificationSubject = new Subject();
    public http403Subject = new Subject();
    public http500Subject = new Subject();
    public overlaySubject = new Subject();
    public spinnerSubject = new Subject();

    constructor() { }

    //some Example methods we call in our CustomHttp Class
    public addNotification(resultJson: any): void {
        this.notificationSubject.next(resultJson);
    }

    public addHttp403(result: any): void {
        this.http403Subject.next(result);
    }

    public addHttp500(result: any): void {
        this.http500Subject.next(result);
    }

    public removeOverlay(): void {
        this.overlaySubject.next(0);
    }

    public addSpinner(): void {
        this.spinnerSubject.next(1);
    }

    public removeSpinner(): void {
        this.spinnerSubject.next(-1);
    }
}

カスタム実装を呼び出すには、たとえば、 「app.component.ts」。

import { Component } from '@angular/core';
import { HttpSubjectService } from "../HttpInterception/httpSubject.service";
import { Homeservice } from "../HttpServices/home.service";

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
})
export class AppComponent {
    private locals: AppLocalsModel = new AppLocalsModel();

    constructor(private httpSubjectService : HttpSubjectService, private homeService : Homeservice) {}

    ngOnInit(): void {
        this.notifications();
        this.httpRedirects();
        this.spinner();
        this.overlay();
    }

    public loadServiceData(): void {
        this.homeService.getCurrentUsername()
            .subscribe(result => {
                this.locals.username = result;
            });
    }

    private overlay(): void {
        this.httpSubjectService.overlaySubject.subscribe({
            next: () => {
              console.log("Call Overlay Service");
            }
        });
    }

    private spinner(): void {
        this.httpSubjectService.spinnerSubject.subscribe({
            next: (value: number) => {
              console.log("Call Spinner Service");
            }
        });
    }

    private notifications(): void {
        this.httpSubjectService.notificationSubject.subscribe({
            next: (json: any) => {
                console.log("Call Notification Service");
            }
        });
    }

    private httpRedirects(): void {
        this.httpSubjectService.http500Subject.subscribe({
            next: (error: any) => {
                console.log("Navigate to Error Page");
            }
        });

        this.httpSubjectService.http403Subject.subscribe({
            next: (error: any) => {
                console.log("Navigate to Not Authorized Page");
            }
        });
    }
}


class AppLocalsModel {
    public username : string = "noch nicht abgefragt";
}

SINCE ANGULAR 4.3 InterCeptorsを使用できます

Angular 4.3には、サーバーエラー500のリダイレクトのような独自のものを実装できるネイティブインターセプターがあります

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class SxpHttp500Interceptor implements HttpInterceptor {

  constructor(public router: Router) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      return next.handle(req).do(evt => { }).catch(err => {
          if (err["status"]) {
              if (err.status === 500) {
                  this.router.navigate(['/serverError', { fehler: JSON.stringify(err) }]);
              }
          }
          return Observable.throw(err);
      });
  }
}

あなたはこれをプロバイダ配列のコアモジュールに登録する必要があります

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { Router } from '@angular/router';
import { SxpHttp500Interceptor } from "./sxpHttp500.interceptor";
 ....

providers: [
    {
        provide: HTTP_INTERCEPTORS, useFactory: (router: Router) => { return new SxpHttp500Interceptor(router) },
        multi: true,
        deps: [Router]
    }
]
10
squadwuschel

Angular 4.3.1リリースでは、HttpInterceptorというインターフェイスが追加されました。

ドキュメントへのリンクは次のとおりです。 https://angular.io/api/common/http/HttpInterceptor

これが実装サンプルです。

これがインターセプタークラスの実装になります。

基本的に他のサービスとして書かれています：

@Injectable()
export class ExceptionsInterceptor implements HttpInterceptor {
    constructor(
        private logger: Logger,
        private exceptionsService: ExceptionsService,
        private notificationsService: NotificationsService
    ) { }
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        return next.handle(request)
            .do((event) => {
                // Do nothing here, manage only errors
            }, (err: HttpErrorResponse) => {
                if (!this.exceptionsService.excludeCodes.includes(err.status)) {
                    if (!(err.status === 400 && err.error['_validations'])) {
                        this.logger.error(err);
                        if (!this.notificationsService.hasNotificationData(err.status)) {
                            this.notificationsService.addNotification({ text: err.message, type: MessageColorType.error, data: err.status, uid: UniqueIdUtility.generateId() });
                        }
                    }
                }
            });
    }
}

次に、これを通常のサービスのように扱うため、アプリモジュールのプロバイダー内に次の行を追加する必要があります。

{ provide: HTTP_INTERCEPTORS, useClass: ExceptionsInterceptor, multi: true }

それが役立つことを願っています。

8
Caius

Angular 4.3は、すぐに使用可能なHttpインターセプターをサポートするようになりました。それらの使用方法を確認してください： https://ryanchenkie.com/angular-authentication-using-the-http-client-and-http-interceptors

2
Martino Bordin

次のノードモジュールでインターセプターをリリースしました。私たちは最終的にnpmパッケージマネージャーでリリースした内部目的のためにこのモジュールを作成しましたnpm install angular2-resource-and-ajax-interceptorhttps://www.npmjs.com/package/angular2-resource-and-ajax-interceptor

0
Rajan

@squadwuschelが指摘したように、この機能を@ angular/httpに組み込む作業が進行中です。これは、新しいHttpClient APIの形式になります。

詳細と現在のステータスについては、 https://github.com/angular/angular/pull/1714 を参照してください。

0
rdukeshier

TeradataのCovalent を試してください。これらは、AngularおよびAngular Materialの多くの拡張機能を提供します。

HTTP 部分を確認し、AngularおよびRESTService（restangularに類似）で欠落しているhttpインターセプターを提供します。

サンプルで Covalent HTTP を使用してJWTトークン認証を実装しました。こちらで確認してください。

https://github.com/hantsy/angular2-material-sample/blob/master/src/app/core/auth-http-interceptor.ts

それについての開発ノートを読んでください IHttpInterceptorを介したトークンベースの認証の処理 。

0
Hantsy

Angular2は、angular1のようなhttpinterceptorをサポートしていません

次に、angular2でのhttpinterceptorの素晴らしい使用例を示します。

https://github.com/NgSculptor/ng2HttpInterceptor

0
Er. Bahuguna Goyal