Angularでhttp POSTを使ってデータを送信する

AngularでPOSTでデータ送信するには、HttpClient.post() メソッドを使います。

GETとそんなに変わらないですが、引数が1つ増えてます。

Book というクラスのデータを送信したければ以下のようにします。(Bookは自分で定義したクラスです)

import { Injectable } from '@angular/core';
import { Book } from './book';
import { Observable, of } from 'rxjs';
import { HttpClient } from '@angular/common/http';

export class BookService {
  private booksUrl = 'https://hogehoge.com/api/books';

  createBook(book: Book): Observable<Book> {
    // APIのURL、送信したいデータを指定してpost()を呼び出す。
    return this.http.post<Book>(`${this.booksUrl}`, book);
  }
}

コンポーネント側はGETと同様に呼び出せばOK。

createBook(book: Book): void {
  this.bookService.createBook(book)
    .subscribe(book => {
      console.log('create book:'+book);
    });
}

以上です。

タイトルとURLをコピーしました