Angularjs가 HTTP Post로 데이터 보내기

1. Angular에서 <any> 응답 유형을 사용하여 API에 요청 게시
2. Angular에서 예상 응답으로 요청 게시

이 주제의 진짜 요점을 알아보기 전에 먼저 http.post()가 Angular에서 무엇을 하는지 알아보겠습니다. 구글을 생각하면 우리가 검색할 때 받은 검색 결과는 post 메소드를 사용하여 서버로 전송되고, 사용자가 구글에서 검색을 시작하면 get 메소드가 호출됩니다.

따라서 http.post()는 Angular에서 서버에 데이터를 저장하는 데 사용됩니다. 이 데이터를 중지할 서버에는 URL이 있습니다.

코더, 특히 jQuery 지식이 있는 사람이 처음으로 $http.post()를 접했을 때 첫 번째 본능은 $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>

그런 다음 Angular에 HTTP 요청을 보내는 HttpClient를 가져올 app.component.ts로 이동합니다. 그런 다음 동일한 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 { }

모든 것이 지시대로 진행되면 세 개의 숫자가 생성된 Post id가 표시되어야 합니다.

Angular에서 예상 응답으로 요청 게시

이 방법을 사용하면 얻고자 하는 데이터를 할당할 수 있기 때문에 사용자가 URL에서 얻는 응답을 더 잘 제어할 수 있습니다. 이 작업을 위해 인터페이스 기사 기능을 호출합니다.

<any>를 <Article>로 바꾸고 바로 아래에 Article 기능을 생성하는 app.component.ts를 약간만 변경합니다.

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에 할당된 이름이 우리가 얻는 것입니다.