Promise
Promise는 JavaScript에서 비동기 작업의 상태와 결과를 나타내는 객체이다.
Promise는 세 가지 상태를 가질 수 있으며, 상태 변화에 따라 콜백 함수를 호출하여 비동기 작업의 결과를 처리할 수 있다.
JavaScript의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다.
Promise의 세 가지 상태
-
pending(대기)
비동기 작업이 아직 완료되지 않은 상태
이 때문에 Promise 객체는 보류 상태로 남는다. -
fulfilled(이행)
비동기 작업이 성공적으로 완료된 상태
이 때 Promise 객체는 성공 결과 값을 가지게 되며, 값을 반환한다. -
rejected(거부)
비동기 작업이 실패한 상태
이 때 Promise 객체는 실패 원인을 가지게 되며, 에러를 반환한다.
Promise 객체는 new Promise() 구문을 사용하여 생성할 수 있다.
생성자 함수는 일반적으로 콜백 함수를 인자로 받는다. 이 콜백 함수는 resolve()와 reject() 매개변수를 가지며, 비동기 작업을 수행한다. 작업이 완료되면 resolve() 함수를 호출하여 성공 결과를 반환하거나, reject() 함수를 호출하여 실패 원인을 반환한다.
const myPromise = new Promise((resolve, reject) => {
// 비동기 작업 수행
if (/* 작업이 성공한 경우 */) {
resolve('성공');
} else {
reject('실패');
}
});위의 예시에서 myPromise는 Promise 객체를 나타낸다.
비동기 작업이 성공한 경우 resolve()를 호출하여 '성공'을 반환하고, 실패한 경우 reject()를 호출하여 '실패'를 반환한다.
Promise 객체를 사용하여 비동기 작업의 결과를 처리하려면 then()과 catch() 메서드를 사용한다. then() 메서드는 fulfilled된 경우 호출되며, catch() 메서드는 rejected된 경우 호출된다. 이를 통해 결과 값을 처리하거나 에러를 처리할 수 있다.
myPromise.then((result) => {
console.log('결과:', result);
}).catch((error) => {
console.error('에러:', error);
});위의 예시에서
then() 메서드는 Promise가 이행된 경우 호출되며, 이행 결과를 result 매개변수로 받아와 처리한다.
catch() 메서드는 Promise가 거부된 경우 호출되며, 거부 원인을 error 매개변수로 받아와 처리한다.
Promise 객체는 비동기 코드를 더 구조화하고 가독성을 높이는 데 도움을 준다. 또한 Promise.all()과 Promise.race()와 같은 정적 메서드를 사용하여 복수의 Promise를 조작하거나 여러 비동기 작업을 조합할 수도 있다.
async (비동기 함수 선언)
async는 함수 선언 앞에 사용되는 키워드로, 비동기 함수를 정의할 때 사용된다. 이 키워드를 사용하면 함수 내에서 await 표현식을 사용할 수 있게 된다. async 함수는 항상 Promise를 반환한다.
async function fetchData() {
// 비동기 작업 수행
const data = await fetch('https://api.example.com/data');
return data.json();
}fetchData()는 비동기 작업을 수행하며, await 키워드를 사용하여 fetch() 함수가 완료될 때까지 기다린다. fetch() 함수는 Promise를 반환하므로, await 키워드를 사용하여 그 결과를 기다릴 수 있다. await 표현식은 fetch() 함수가 완료되면 비로소 해당 결과를 반환한다.
await (비동기 작업 대기)
await는 async 함수 내에서 사용되는 키워드로, 비동기 작업이 완료될 때까지 함수의 실행을 일시 중지한다. await 표현식은 Promise를 기다리며, Promise가 이행되면 그 결과를 반환한다.
예를 들어, 이전 예제의 fetchData 함수에서 사용된 await 표현식을 다시 본다면
const data = await fetch('https://api.example.com/data');위의 코드에서 await는 fetch() 함수의 완료를 기다리고, fetch() 함수가 이행되면 결과를 반환하여 data 변수에 할당한다. 이를 통해 비동기 작업을 동기적으로 처리할 수 있다.
await는 Promise 객체를 기다리기 때문에, 다른 비동기 작업을 수행하는 함수나 메서드에서도 사용할 수 있다.
예를 들어, await를 사용하여 타임아웃을 기다리는 예제
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function waitAndLog() {
await delay(2000);
console.log('2 seconds have passed');
}
waitAndLog();위의 코드에서 delay() 함수는 주어진 시간 (여기서는 2초) 동안 대기하는 Promise를 반환한다. waitAndLog() 함수에서 await를 사용하여 2초 동안 기다린 후에 '2 seconds have passed'를 출력한다.
이렇게 await를 사용하면 비동기 작업의 결과를 간편하게 처리할 수 있으며, 동기적인 코드처럼 작성할 수 있다.
