1. 동기 / 비동기 비교
- 동기와 비동기 코드 비교하기
1) 동기 코드
console.log("손님1 커피 주문");
console.log("손님1 커피 제조 완료");
console.log("손님2 커피 주문");
console.log("손님2 커피 제조 완료");
2) 비동기 코드
console.log("손님1 커피 주문");
setTimeout(() => {
console.log("손님1 커피 제조 완료");
}, 2000); // 2초 후에 실행
console.log("손님2 커피 주문");
setTimeout(() => {
console.log("손님2 커피 제조 완료");
}, 1000); // 1초 후에 실행
2. Promise 사용해보기
1. Promise로 비동기 작업 처리하기
콜백함수로 처리한 코드
function orderCoffee(order, callback) {
console.log(`${order} 커피 주문 중...`);
setTimeout(() => {
if (order) {
callback(null, `${order} 커피 준비 완료`);
} else {
callback("주문 오류", null);
}
}, 2000);
}
orderCoffee("아메리카노", (error, result) => {
if (error) {
console.error(error);
} else {
console.log(result);
}
});
Promise로 변환한 코드
function orderCoffee(order) {
return new Promise((resolve, reject) => {
console.log(`${order} 커피 주문 중...`);
setTimeout(() => {
if (order) {
resolve(`${order} 커피 준비 완료`);
} else {
reject("주문 오류");
}
}, 2000);
});
}
orderCoffee("카푸치노")
.then(result => console.log(result))
.catch(error => console.error(error));
3. async/await 적용하기
1. 프로미스 코드
function orderCoffee(order) {
return new Promise((resolve, reject) => {
console.log(`${order} 커피 주문 중...`);
setTimeout(() => {
if (order) {
resolve(`${order} 커피 준비 완료`);
} else {
reject("주문 오류");
}
}, 2000);
});
}
orderCoffee("카푸치노")
.then(result => console.log(result))
.catch(error => console.error(error));
2. async/await 코드
async function makeCoffee() {
try {
const result = await orderCoffee("카푸치노");
console.log(result);
} catch (error) {
console.error(error);
}
}
makeCoffee();
4. Promise all
1. Promise.all 이용하여 병렬로 작업처리
async function makeMultipleCoffees() {
try {
const [coffee1, coffee2] = await Promise.all([
orderCoffee("라떼"),
orderCoffee("에스프레소")
]);
console.log(coffee1);
console.log(coffee2);
} catch (error) {
console.error(error);
}
}
makeMultipleCoffees();
'프론트엔드' 카테고리의 다른 글
CODE_DAY3 (0) | 2024.11.01 |
---|---|
CODE_DAY 1 (0) | 2024.10.30 |
동기,비동기 / promise & async/await (1) | 2024.10.21 |
프론트엔드 002 (0) | 2024.09.06 |
프론트엔드 001 (6) | 2024.09.05 |