STUDY

[Angular] @angular/common/http

꿀떡최고 2022. 2. 6. 17:43
반응형
npm i @angular/common

 

- app.module.ts 추가

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

imports: [
    HttpClientModule
],

 

- constructor

  constructor(private http: HttpClient) { }

 

- get

  apiTest() {
    this.http.get('https://jsonplaceholder.typicode.com/todos/1').subscribe((res) => {
      console.log(res)
    })
  }

 

- post

  apiTest() {
    this.http.post('https://jsonplaceholder.typicode.com/posts', 
    {
      title: 'foo',
      body: 'bar',
      userId: 1,
    })
    .subscribe((res) => {
      console.log(res)
    })
  }

 

- put

  apiTest() {
    this.http.put('https://jsonplaceholder.typicode.com/posts/1',
    {
      id: 1,
      title: 'foo',
      body: 'bar',
      userId: 1,
    })
    .subscribe((res) => {
      console.log(res)
    })
  }

 

- delete

  apiTest() {
    this.http.delete('https://jsonplaceholder.typicode.com/posts/1')
    .subscribe((res) => {
      console.log(res)
    })
  }
반응형

'STUDY' 카테고리의 다른 글

[Angular] 프로젝트 시작, props, emit  (0) 2022.02.05
[axios] axios에 header 넣기  (0) 2021.11.24
[ANIMATION] animation 속성  (0) 2021.11.22
[:nth-child] :nth-child 활용  (0) 2021.11.20
[오류 해결] backface-visibility: hidden  (0) 2021.11.17