Promise 이해하기


자바스크립트 언어에서 프로미스는 ES5 버전에서 정식 기능으로 채택되었다. 자바스크립트에서 프로미스는 promise라는 이름의 클래스이다. 따라서 Promise 클래스를 사용하려면 일단 new 연산자를 적용해 프로미스 객체를 만들어야 한다. 그리고 new 연산자로 프로미스 객체를 만들 때 다음처럼 콜백 함수를 제공해야 한다.

const promise = new Promise(콜백함수)

여기서 Promise의 콜백함수는 resolve와 reject라는 두 개의 매개 변수를 가진다. 타입스크립트에서 Promise는 다음 처럼 제네릭 클래스 형태로 사용할 수 있다.

const numPromise: Promise<number> = new Promise<number>(콜백함수)

resolve와 reject 함수

import {readFile} from 'fs'

export const readFilePromise = (filename: stirng): Promise<string> => 
	new Promise<string>((
		resolve: (value: string) => void,
		reject: (error: Errot) => void => {
			readFile(filename, (err: Error, buffer: Buffer) => {
				if(err) reject(err)
				else resolve(buffer.toString())
	}
}

위 코드를 보면 reject는 err를 반환하고 정상적인 실행은 resolve가 호출된다. 이것을 결과를 받는 then함수와 error를 받는 catch 함수를 쓰면 에러를 catch로 반환되고 결과는 then에게 반환됨을 알 수 있다.

Promise.resolve .reject메서드

Promise 클래스는 resolve라는 클래스 메서드를 제공하는데 Promise.resolve(값) 형태로 호출하면 항상 이 값은 then 메서드에서 얻을 수 있다.

Promise.resolve([1, 2, 3]
 .then(value => console.log(value)) / [1 2 3]

마찬가지로 Promise.reject(new Error('에러 발생))에 catch를 쓰면 에러를 catch로 받아볼 수 있다.

then - 체인

Promise의 then 인스턴스 메서드를 호출 할 때 사용한 콜백 함수는 값을 반환할 수 있다. 이 then에서 반환되는 값은 또 다른 then 메데스를 호출해 값을 수진할 수 있다. 흥미롭게도 then 메서드는 반환된 값이 Promise 탇입이면 이를 해소한 값을 반환한다. 만약 거절당한 값일 때에는 catch 메서드에서 이 거절당한 값을 얻을 수 있다. Promise 객체에 then메서드를 여러번 호출하는 코드형태를 then 체인이라고 한다.

Promise.all 메서드