TypeScriptとAngularでHTTP POSTリクエストを送信する方法

2024-05-23

TypeScript と Angular での HTTP POST リクエストパラメーター

パラメーターの種類

Angular 2 で使用できる 2 種類のパラメーターがあります。

URL パラメーター: リクエスト URL に追加されるパラメーターです。例: https://example.com/api/users?id=123
リクエストボディ: リクエストの本文に含まれるパラメーターです。これは、JSON またはフォームエンコードされたデータなど、さまざまな形式で送信できます。

URL パラメーターを追加するには、HttpClient サービスの get() または post() メソッドを使用します。これらのメソッドは、HttpParams オブジェクトを受け取ります。このオブジェクトを使用して、パラメーターを追加できます。

import { HttpClient, HttpParams } from '@angular/common/http';

const params = new HttpParams();
params.set('id', 123);

this.http.get('https://example.com/api/users', { params: params })
  .subscribe(data => console.log(data));

リクエストボディを追加するには、HttpClient サービスの post() メソッドを使用します。このメソッドは、第二引数としてリクエストボディを受け取ります。ボディは、JSON オブジェクト、フォームエンコードされたデータ、またはその他の形式で送信できます。

import { HttpClient } from '@angular/common/http';

const body = {
  name: 'John Doe',
  email: '[email protected]'
};

this.http.post('https://example.com/api/users', body)
  .subscribe(data => console.log(data));

型安全性

TypeScript を使用すると、パラメーターの型を指定できます。これにより、コードのエラーを回避し、コードの読みやすさを向上させることができます。

interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 123,
  name: 'John Doe',
  email: '[email protected]'
};

this.http.post('https://example.com/api/users', user)
  .subscribe(data => console.log(data));

Angular 2 で HTTP POST リクエストパラメーターを使用するには、HttpClient サービスの get() または post() メソッドを使用します。これらのメソッドを使用して、URL パラメーターとリクエストボディを追加できます。TypeScript を使用すると、パラメーターの型を指定できます。

TypeScript と Angular での HTTP POST リクエストパラメーター - サンプルコード

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private http: HttpClient) { }

  createUser() {
    const user = {
      name: 'John Doe',
      email: '[email protected]'
    };

    this.http.post('https://example.com/api/users', user)
      .subscribe(data => console.log(data));
  }
}

このコードは次のことを行います。

HttpClient サービスをコンポーネントに注入します。
createUser メソッドを定義します。
新しいユーザーオブジェクトを作成します。
http.post() メソッドを使用して、users エンドポイントに POST リクエストを送信します。
リクエストが成功すると、コンソールにレスポンスをログ記録します。

エラー処理

HTTP リクエストは失敗する可能性があることに注意することが重要です。エラーを処理するには、subscribe() メソッドの第二引数と第三引数を使用します。

this.http.post('https://example.com/api/users', user)
  .subscribe(
    data => console.log(data),
    error => console.error(error)
  );

このコードは、リクエストが成功した場合はコンソールにレスポンスをログ記録し、リクエストが失敗した場合はコンソールにエラーをログ記録します。

この例は、TypeScript と Angular で HTTP POST リクエストパラメーターを使用する方法を示す基本的な例です。詳細については、Angular HttpClient ドキュメントを参照してください。

TypeScript と Angular での HTTP POST リクエストパラメーター - その他の方法

フォームエンコードされたデータを使用して POST リクエストを送信するには、HttpParams オブジェクトと FormData オブジェクトを使用します。

import { HttpClient, HttpParams, FormData } from '@angular/common/http';

const params = new HttpParams();
params.set('name', 'John Doe');
params.set('email', '[email protected]');

const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('email', '[email protected]');

this.http.post('https://example.com/api/users', formData)
  .subscribe(data => console.log(data));

カスタムヘッダーを POST リクエストに追加するには、HttpClient サービスの post() メソッドの第三引数を使用します。

import { HttpClient } from '@angular/common/http';

const headers = new HttpHeaders({
  'Content-Type': 'application/json'
});

this.http.post('https://example.com/api/users', user, { headers: headers })
  .subscribe(data => console.log(data));

インターセプターを使用して、すべての HTTP リクエストにヘッダーまたはその他の変更を追加できます。

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MyInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const headers = new HttpHeaders({
      'Authorization': 'Bearer my-token'
    });

    const modifiedRequest = request.clone({ headers: headers });

    return next.handle(modifiedRequest);
  }
}