web-dev-qa-db-ja.com

Angular 5で非同期呼び出しを適切に使用する

私は数日間グーグルをしていて、Angular 5（または2-3-4、何でも））でAsync API呼び出しを使用する方法について多くの異なるシナリオを見つけました。

誰かがそれについて正しい例を（良いユースケース）私に与えることができますか？

例.

  • （async-try-catch）を使用してAPI呼び出しを行う
  • コンポーネントレベルでその呼び出しを「サブスクライブ」する方法

ありがとうございました ！

angularasynchronousasync-await
8
bgrujoski

私の意見と私が学んだ方法に基づいて回答者を提供します。だから、絶対に真実だとは思わないで、むしろ質問してください！

まず、TypeScriptには、非同期呼び出しを行う2つの方法があることを知っておく必要があります：PromisesおよびObservables。

PromiseはES6のネイティブであり、ObservableはRx JSの一部です。

しかし、どちらを使用するのですか？

私の意見なので、Observablesを使用するように教えます。

  • 彼らは止めることができます
  • 彼らは再びプレイすることができます
  • 便利な演算子がたくさんあります
  • 彼らはいくつかの値を扱うことができます

このすべて、Promisesはできません。

API呼び出しを行う

モジュールをインポートする

非常に簡単：最初に、それを担当するモジュールをインポートする必要があります：

import { HttpClientModule } from '@angular/common/http';
// ...
imports: [HttpClientModule]

これはAngular 5の新しい改良されたhttpサービスです。古いもの（Http）はすぐに使用するため、使用することを強くお勧めします。時代遅れになる。

HttpClientサービスを使用する

さて、あなたのサービスでは、HttpClientを次のように使用できます

import { HttpClient } from '@angular/common/http';
// ...
constructor(
  private http: HttpClient
) {}
// ...
getAny(): Observable<any> {
  return this.http.get<any>('url'); // request options as second parameter
}

ビジネスサービスを使用する

コンポーネントで、次のことができるようになりました

import { MyService } from '../myservice/myservice.service';
// ..
constructor(private myService: MyService) {
    this.myService.getAny().subscribe(() => {});
}
// ..

補足情報

エラーまたはローダーの処理

進行状況バーを表示したり、エラーを処理したりするとします。そのためには、Interceptorsを使用する必要があります。インターセプターは、送信前（または送信後）にリクエストをキャッチし、何かを行うサービスです。

エラーの簡単なインターセプターを次に示します。

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ErrorHandlerService implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next
      .handle(req)
      .catch(err => {
        console.log('error occured');
        return Observable.throw(err);
      });
  }
}

それを使用するには、モジュールで値を指定するだけです：

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

推測したと思いますが、それを使用してプログレスバーを処理することもできます;）

Observableへのサブスクライブと非同期の使用

前に見たように、http呼び出しを購読できます。

特定のエラーを処理し、コンポーネントで何らかのロジックを実行する場合、次のようになります。

myService.getAny().subscribe(
  responseAfterSuccess => {},
  responseAfterError => {}
);

このコードを使用して、成功とエラーを処理します。

最後に、async pipe：非同期パイプはObservableをデータに変換します。それを使用するには、そうします

this.myVar = myService.getAny();

変数myVarにはObservableが含まれます。さて、あなたのHTMLで、これで

<div *ngFor="let item of myVar | async">{{ item }}</div>

Angularは、データを表示する前に到着するのを待ち、Observableをデータに変換します。

25
user4676340