Promise는 Javascript 공부를 시작하고 만난 개념중에 가장 골치 아픈 친구입니다. Promise가 무엇인지와 async & await가 무엇인지 그리고 공부하면서 알아낸 팁들을 적어보려고합니다.

Promise

Promise 객체는 Javascript에서 비동기 작업을 수행해줍니다. Promise는 보통 서버에서 데이터를 화면에 표시할때 사용됩니다. 데이터를 다 받아오기 전에 화면에 데이터를 표시하려고 하면 오류가 나거나 아무것도 표시 되지 않습니다. Promise는 이런 문제들을 해결하기 위해 등장했습니다.

Promise는 세가지 상태 중 하나를 가집니다.

Pending

Pending은 대기 중이라는 뜻으로 비동기 로직이 아직 완료되지 않은 상태입니다.

Fulfilled

Fulfilled는 비동기 로직이 정상적으로 완료된 상태입니다.

Rejected

Rejected는 비동기 로직이 실패하거나 오류가난 상태입니다.

Promise는 아래와 같은 문법으로 작성됩니다.

let promise = new Promise(resolve, reject) => {
  //executor
}

promise가 선언될때 result 상태는 undefined입니다. executor에서 resolve(value)가 호출되면 정상적으로 끝났을 경우 promise가 fulfilled 상태가 되며 value를 반환합니다. 반대로 reject(error)가 호출될 경우 promise의 상태가 rejected로 변하고 result는 error가 반환됩니다.

async & await

async는 일반 함수를 비동기적으로 바꿔줍니다. async는 function 앞에 붙으며 반화값을 반드시 Promise로 변환합니다.

async function a() {
	return 1; 
}

a().then(result => console.log(result))

Promise { <pending> }
>1

await은 반드시 async 함수 안에 있어야 동작합니다. 그렇기 때문에 최상위 레벨 코드에서는 사용할 수 없습니다. await 키워드는 Promise가 동작이 끝날 때 까지 기다려줍니다. Promise.then와 비슷한 역할이지만 더 깔끔해서 이해를 도와줍니다.

또한 await는 Promise만 기다려주는 것이지 일반함수를 기다려주지는 않습니다. await가 던진 에러를 핸들링하기 위해서는 try-catch문을 사용할 수 있습니다.

async function a() {
	try {
   		let response = await fetch(http://localhost:3000/asdeqx);
   		const user = response.json();
   	} catch(err) {
   		console.error(err);
   	}
}

a();

await는 모든 Promise를 한번에 처리하는 Promise.all와도 잘 동작합니다.