function delay(message, callback) {
setTimeout(() => {
console.log(message);
callback();
}, 1000);
}
console.log("1");
delay("2", () => {
console.log("3");
});
console.log("4"); // 출력결과 1 4 2 3
콜백 패턴은 비동기 작업을 다루는 가장 기본적인 패턴이지만, 중첩된 콜백 함수들이 발생할 수 있어 가독성이나 유지 보수성 측면에서 한계가 있을 수 있습니다.
이를 해결하기 위해 Promise, async/await 등의 패턴이 도입되었습니다.
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = { id: 1, name: "John" };
if (data) {
resolve(data); // 성공 시 데이터 전달
}
else {
reject("Data not found"); // 실패 시 오류 메시지 전달
}
}, 1000);
});
}
fetchData()
.then((data) => {
console.log(data); // 출력 {id: 1, name: 'John'}
})
.catch((error) => {
console.error(error);
});
Promise는 JavaScript에서 비동기 작업을 더 효율적으로 다룰 수 있도록 도와주는 객체입니다.
비동기 작업을 수행하고 해당 작업의 성공 또는 실패 결과를 처리하기 위한 추상화된 방식을 제공합니다.
Promise는 세 가지 상태를 가집니다
Pending (대기): 비동기 작업이 아직 완료되지 않은 상태입니다.
resolved (성공): 비동기 작업이 성공적으로 완료된 상태입니다. 결과 값이 있습니다.
Rejected (실패): 비동기 작업이 실패한 상태입니다. 오류 정보가 있습니다.
async function fetchDataAsync() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = { id: 1, name: "John" };
if (data) {
resolve(data);
} else {
reject("Data not found");
}
}, 1000);
});
}
async function main() {
try {
const data = await fetchDataAsync();
console.log("Data:", data);
} catch (error) {
console.error("Error:", error);
}
}
main();
async는 JavaScript에서 비동기 작업을 보다 쉽게 다룰 수 있도록 도와주는 키워드입니다.
async 함수를 사용하면 코드를 동기적으로 작성하듯이 비동기 작업을 다룰 수 있게 됩니다.
await 키워드 다음에는 Promise가 위치하며, 해당 Promise가 완료될 때까지 함수의 실행을 일시 중지하고 기다립니다.
Promise는 resolve, reject를 사용했지만 async는 Promise와 다르게 성공과 실패를 try catch 문법을 사용하여 에러를 구분합니다.