Angular then()メソッド

1. Angular で then() メソッドを使用する
2. Angular の promise

then() メソッドを紹介し、Angular での promises について説明します。

Angular で then() メソッドを使用する

then() は、2 番目の引数として使用される Angular の promise メソッドです。then() メソッドは、promise が拒否された場合にのみ実行されます。

then() メソッドを詳細に理解するには、まず Angular の promises について学ぶ必要があります。

Angular の promise

アプリケーションが単純な場合、コールバック関数はすぐに呼び出されましたが、アプリケーションが最近のブラウザー用の JavaScript で複雑で豊富になると、コールバックは面倒になりました。コールバック機能が遅くなり、データの要求中にスタックすることがあります。

ES6 の解決策として、問題を解決し、それらを単純化するために promises が導入されました。これらは、非同期関数をより適切に作成するための強力な抽象化であり、保守が容易です。

promise は、主に非同期操作を同期的に処理するために使用される API 抽象化です。

次のコマンドを使用して、新しいアプリケーションを作成しましょう。

# angular
ng new my-app

Angular で新しいアプリケーションを作成したら、アプリケーションディレクトリに移動します。

# angular
cd my-app

それでは、アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# angular
ng serve --open

次に、1 秒の待機時間後に値を返す promise を作成します。まず、以下に示すように、HttpClientModule をインポートし、それを app.module.ts の AppModule のインポート配列に追加します。

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

次に、app.component.ts 内に HttpClient の挿入を開始し、コンストラクターを作成して APIURL を定義します。

# angular
import { Component, VERSION, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';

  constructor(private httpClient: HttpClient){}
}

HttpClient を挿入したら、fetchJson() を定義し、それを ngOnInit() から呼び出すため、アプリケーションが読み込まれるたびに初期化されます。以下に示すように、app.component.ts のコードには追加のコードが含まれます。

# angular
ngOnInit(){
    this.fetchJson();
  }
  private fetchJson(){}

get() メソッドを使用して GET HTTP リクエストを送信し、オブザーバブルを返します。toPromise() を使用して promise に変換し、then() メソッドを使用します。

# angular
private fetchJson(){
    const promise = this.httpClient.get(this.apiUrl).toPromise();
    console.log(promise);
    promise.then((data)=>{
      console.log("Promise resolved with: " + JSON.stringify(data));
    }).catch((error)=>{
      console.log("Promise rejected with " + JSON.stringify(error));
    });
  }

出力：

上記の出力から、promise が解決され、promise がフェッチされた then() メソッドを使用してデータも返されました。2 番目の引数として promise を指定して then() メソッドを使用できます。