Angularjs は HTTP Post でデータを送信する

1. Angular で応答タイプ <any> を使用して API にリクエストを送信する
2. Angular で期待される応答を伴う POST リクエスト

このトピックの本当のポイントに飛び込む前に、まず、Angular で http.post() が何をするかを学びましょう。Google について考えると、検索時に受け取る検索結果は post メソッドを使用してサーバーに送信され、ユーザーが Google で検索を開始すると、get メソッドが呼び出されます。

そのため、Angular では http.post() を使用してサーバーにデータを保存します。このデータを停止するサーバーには URL があります。

コーダーが初めて $http.post() に出くわしたとき、特に jQuery の知識がある人は、最初の本能は $jQuery.post() を $http.post() に置き換えることですが、これは Angular はデータの送信方法が異なるため、機能しません。

$http.post() 関数が正しく適用されていない場合、送信される URL データが呼び出されますが、データは送信されません。先に進んで、HTTP Post 関数を適切に適用するさまざまな方法を見てみましょう。

Angular で応答タイプ <any> を使用して API にリクエストを送信する

最初の例では、Jason に割り当てられた ID を返す URL をリクエストする必要があります。応答タイプは <any> であるため、応答として返送されたすべてのプロパティを処理します。

設定するのは非常に簡単な html です。

<div>
  <h1>Angularjs HTTP POST</h1>
  <div>Post Id: {{ postId }}</div>
</div>

次に、app.component.ts に移動します。ここで HttpClient をインポートします。これにより、HTTP リクエストが Angular に送信されます。次に、コンストラクターとして同じ HttpClient を使用します。

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

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
  postId;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .post<any>('https://reqres.in/api/users', {
        name: 'Jason',
      })
      .subscribe((data) => {
        this.postId = data.id;
      });
  }
}

そして最後に、app.module.ts に進みます。ここでは、HttpClientModule を Angular にインポートします。

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

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

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

すべてが指示どおりに進むと、3つの番号が生成された投稿 ID が表示されます。

Angular で期待される応答を伴う POST リクエスト

このメソッドを使用すると、取得するデータを割り当てることができるため、URL から取得する応答をより適切に制御できます。このタスクでは、interface Article 関数を呼び出します。

app.component.ts にわずかな変更を加えるだけで、<any> を <Article> に置き換え、そのすぐ下に Article 関数を作成します。

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

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
  postId;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .post<Article>('https://reqres.in/api/users', {
        name: 'Jason',
      })
      .subscribe((data) => {
        this.postId = data.name;
      });
  }
}
interface Article {
id: number;
name: string;
}

HTTP が ID を応答として返す代わりに、ID に割り当てられた名前が取得されます。