[Javascript] Promise, async, await

Promise는 비동기 처리에 사용되는 객체이다.

일반적으로 Javascript 에서 비동기 처리시에 함수내에서

Rest api 호출했을 때라던가, DB 데이터를 조회하기 위해 요청을 보냈을때,

응답이 오지않았는데도 프로세스를 끝내버려 겉으로는 정상동작으로 보이나, 실제로는 값이 반환되지 않는 경우가 종종 있다.

Promise는 이 처럼 비동기 프로세스를 마치 동기 프로세스처럼 사용할 수 있는 객체이다.

Promise는 다음 중 하나의 상태를 가진다.

대기(pending) : 말 그대로 대기 상태이다. Promise 객체를 console.log로 확인해보면 <Pending> 이라는 문구를 볼 수 있을 것이다.
이행(fulfiled) : 해당 Promise 객체가 정상적으로 처리되었음을 의미한다.
거부(rejected) : 해당 Promise 객체가 처리를 실패했음을 의미한다.

위에 흐름도 마지막 부분에 then() 과 catch() 가 있는데,

각각 이행과, 거부시에 동작한다.

사용방법은 다음 글에 기술할 생각이다.

async function는 Promise 객체를 반환한다.

callback 과 promise의 단점을 보완한 문법으로 가독성이 좋고 개발자의 입장에서도 작성이 편하다.

async function func() {
	...
}

위의 방식으로 사용하는데 async 하면 따라 붙을수 있는 것이 바로 await 이다.

직관적으로 보자면 '기다린다' 는 표현이 적합할 것 같다.

await는 async function 내부에서만 사용할 수 있고, 함수 실행 시, 함수 내부에 await가 명시된 코드가 완료될때까지 기다린다.

표현이 뭔가 너무 간단해서 잘 이해가 안될수도 있는데,

예를들면,

async function func(){
	const testValue = await test();
}

위의 코드에서 func() 내에 작성된 await test()의 값이 반환 될때까지 기다린다.

사실 그냥 이렇게만 보면,

"await가 필요한가?"

라고 생각할 수 있는데, 만약 test()의 내용이 임의의 Rest api 호출이고,

위에 작성된 코드 이후에 testValue를 사용하여 if문을 작성하는 등의 코드가 작성되어 있다고 생각해보자.

function func(){
	const testValue = test();
    
	console.log(testValue)
}

test() 가 임의의 Rest api 호출을 실행했고, 서버의 응답이 지연되어 값의 반환도 지연된다면?

console.log는 undefined를 출력할 것이다.

이와 같은 문제를 해결하기 위해 promise, async & await를 사용한다.

사용법은 다음 글에 더 자세히 기술하고자 한다

개발일기