Angular then() 메서드

1. Angular에서 then() 메서드 사용
2. Angular의 promise

then() 메서드를 소개하고 Angular에서 promises에 대해 논의합니다.

Angular에서 then() 메서드 사용

then()은 두 번째 인수로 사용되는 Angular promise 메소드입니다. then() 메소드는 promise가 거부된 경우에만 실행됩니다.

then() 메소드를 자세히 이해하려면 먼저 Angular의 promise에 대해 배워야 합니다.

Angular의 promise

애플리케이션이 단순해지면 콜백 함수가 즉시 호출되지만, 최신 브라우저용 JavaScript로 애플리케이션이 복잡해지고 풍부해지면서 콜백이 번거로워졌습니다. 콜백 기능이 느려지고 데이터를 요청하는 동안 가끔 멈추는 경우가 있습니다.

ES6의 솔루션으로 promise가 도입되어 문제를 해결하고 단순화했습니다. 비동기 함수를 더 잘 작성하고 유지 관리하기 쉬운 강력한 추상화입니다.

promise는 주로 비동기식 작업을 동기식으로 처리하는 데 사용되는 API 추상화입니다.

다음 명령을 사용하여 새 애플리케이션을 만들어 보겠습니다.

# angular
ng new my-app

Angular에서 새 애플리케이션을 만든 후 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

다음으로 1초의 대기 시간 후에 값을 반환하는 promise를 만듭니다. 먼저 HttpClientModule을 가져와서 아래와 같이 app.module.ts에 있는 AppModule의 가져오기 배열에 추가합니다.

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

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

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

그런 다음 app.component.ts 내부에 HttpClient를 주입하기 시작하고 생성자를 만들고 API URL을 정의합니다.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';

  constructor(private httpClient: HttpClient){}
}

일단 HttpClient를 주입하고 나면 fetchJson()을 정의하고 ngOnInit()에서 호출하므로 애플리케이션이 로드될 때마다 초기화됩니다. 아래와 같이 app.component.ts의 코드에는 추가 코드가 있습니다.

# angular
ngOnInit(){
    this.fetchJson();
  }
  private fetchJson(){}

관찰 가능한 항목을 반환하기 위해 get() 메서드를 사용하여 GET HTTP 요청을 보냅니다. toPromise()를 사용하여 promise로 변환하고 then() 메서드를 사용합니다.

# angular
private fetchJson(){
    const promise = this.httpClient.get(this.apiUrl).toPromise();
    console.log(promise);
    promise.then((data)=>{
      console.log("Promise resolved with: " + JSON.stringify(data));
    }).catch((error)=>{
      console.log("Promise rejected with " + JSON.stringify(error));
    });
  }

출력:

위의 출력에서 ​​promise가 해결되었으며 fetch를 약속한 then() 메서드를 사용하여 데이터도 반환했습니다. 두 번째 인수로 약속과 함께 then() 메서드를 사용할 수 있습니다.