AngularでHTTPリクエストを行い、レスポンスを変数に格納する方法


  1. HttpClientを使用する方法: Angularでは、HttpClientモジュールを使用してHTTPリクエストを行います。まず、HttpClientModuleをアプリケーションにインポートします。
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule { }

次に、HTTPリクエストを実行し、レスポンスを変数に格納するコンポーネント内のメソッドを作成します。

import { HttpClient } from '@angular/common/http';
export class YourComponent {
  response: any;
  constructor(private http: HttpClient) { }
  makeHttpRequest() {
    this.http.get('https://api.example.com/data').subscribe(data => {
      this.response = data;
    });
  }
}

上記の例では、HttpClientをコンポーネントのコンストラクタで注入し、makeHttpRequestメソッドでHTTP GETリクエストを実行しています。レスポンスはsubscribeメソッドのコールバック関数内で変数responseに格納されます。

  1. async/awaitを使用する方法: もう一つの方法は、async/awaitキーワードを使用する方法です。以下はその例です。
import { HttpClient } from '@angular/common/http';
export class YourComponent {
  response: any;
  constructor(private http: HttpClient) { }
  async makeHttpRequest() {
    this.response = await this.http.get('https://api.example.com/data').toPromise();
  }
}

上記の例では、makeHttpRequestメソッドをasync関数として定義し、awaitキーワードを使用してHTTPリクエストを非同期に実行しています。レスポンスは変数responseに直接格納されます。

これらの方法を使用すると、AngularでHTTPリクエストを行い、レスポンスを変数に格納することができます。適切な方法を選択して、アプリケーションの要件に合わせて実装してください。