프로미스(Promise)와 async/await은 자바스크립트에서 비동기 작업을 수행하기 위한 방법
일단,
자바스크립트의 비동기 작업을 호출하면, 비동기로 동작하는 코드가 완료되지 않아도 기다리지 않고 즉시 종료한다.
그러므로, 비동기 작업 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 보내거나 상위 스코프의 변수에 할당하면 원하는 동작을 하지않는다.
따라서, 자바스크립트는 비동기 처리를 위해 콜백 함수를 지원하고,
이를 사용하여 비동기 함수의 처리 결과에 대한 작업을 비동기 함수 내부에서 수행해야 한다.
콜백 함수를 통해 비동기 처리 결과에 대한 후속 처리를 수행하는 비동기 함수가 또다시 비동기 함수를 호출해야 한다면
콜백 함수의 호출이 중첩이 되어 복잡도가 높아지고 가독성도 떨어진다.
이를 콜백 지옥이라 한다.
프로미스(Promise)
자바스크립트에서 비동기 작업의 결과를 나타내는 객체이다.
ES6에서 도입되었고, 이 콜백 함수는 resolve와 reject함수를 인수로 전달 받는다.
const promise = new Promise((resolve, reject) => {
if (/* 비동기 처리 성공 조건 */) {
resolve('비동기 처리 성공!!!');
} else {
/* 비동기 처리 실패 */
reject('비동기 처리 실패!!!');
}
});프로미스는 3가지 상태를 가진다.
- pending(대기 중): 초기 상태, 이행되거나 거부되지 않음
- fulfilled(이행됨): 연산이 성공적으로 완료
- rejected(거부됨): 연산이 실패하거나 오류 발생
프로미스는 처리 상태에 따라 후속 처리를 위해 후속 메서드를 제공한다.
- then
then은 두 개의 콜백 함수를 인수로 전달 받는다.
성공, 실패 두 개의 상태 모두 프로미스를 반환한다.
// fulfilled
new Promise(resolve => resolve('fulfilled'))
.then(v => console.log(v), e => console.error(e));
// rejected
new Promise((_, reject) => reject(new Error('rejected')))
.then(v => console.log(v), e => console.error(e));- catch
then의 rejected와 동일하게 동작한다.
new Promise((_, reject) => reject(new Error('rejected')))
.catch(e => console.log(e));- finally
프로미스의 성공과 실패에 상관없이 무조건 한 번 호출된다.
프로미스 상태와 상관없이 공통적으로 수행되어야 할 내용이 있을 때 유용하다.
async/await
ES8에서 도입된 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 기능.
ES6에서 도입된 제너레이터 함수로 비동기 작업을 처리할 때, 코드가 길어지고 가독성이 떨어지는 문제를 보완하여,
제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리 처럼 동작하도록 구현할 수 있는 async/await이 도입.
- await 키워드는 반드시 async 함수 내부에서 사용해야 한다.
- await 키워드는 비동기 처리가 수행된 상태가 될 때까지 대기하다가, 되면 처리 결과를 반환한다.
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json()
} catch (error) {
console.error(error);
}
}모든 비동기 처리에 await 키워드를 사용하는 것은 주의해야 한다.
비동기 함수의 처리 결과를 가지고 다음 작업을 수행하는 것이 아닌 이상 대기 해야할 이유가 없으므로
처리 순서가 보장되어야 하는 비동기 함수에 async/await을 사용해야 한다.
참고자료
모던 자바스크립트 Deep Dive
