💡 학습목표
1. Promise 타입에 대해 알아 보자.
2. Promise 타입 선언과 활용 1. Promise 타입에 대해 알아 보자.
자바스크립트 Promise는 비동기 작업을 처리하기 위한 객체입니다. Promise는 어떤 작업의 결과를 반환하는 객체로서, 이를 통해 비동기적으로 실행되는 작업을 처리하고 그 결과를 콜백 함수 등을 이용해 처리할 수 있습니다.
Promise는 총 3가지 상태를 갖습니다.
- 대기(pending): Promise 객체가 생성되었으나 아직 처리가 진행되지 않은 상태입니다.
- 이행(fulfilled): Promise 객체가 처리를 완료하여 결과를 반환한 상태입니다.
- 거부(rejected): Promise 객체가 처리를 실패하였거나 오류가 발생한 상태입니다.
💡 자바스크립트 엔진은 싱글 스레드로 동작하며, 이벤트 루프를 통해 비동기 작업을 처리합니다.-------------------------------
| Browser |
| ------------------------- |
| | JavaScript | |
| | Engine | |
| | +-----------+ | |
| | |Call Stack | | |
| | +-----------+ | |
| | | |
| | +-----------+ | |
| | |Message | | |
| | |Queue | | |
| | +-----------+ | |
| | | |
| | Event | |
| | Loop | |
| | | |
| ------------------------- |
| |
--------------------------------
Call Stack은 현재 실행 중인 함수의 스택입니다. 함수가 호출될 때마다 스택에 추가되고, 함수가 종료되면 스택에서 제거됩니다. -
Message Queue는 비동기 작업 (예:setTimeout, 이벤트 리스너의 콜백)이 완료되면 해당 콜백 함수가 추가되는 큐입니다. -
Event Loop는 계속해서Call Stack과Message Queue를 확인합니다. 만약Call Stack이 비어 있고,Message Queue에 작업이 있으면,Event Loop는Message Queue의 작업을Call Stack으로 이동시켜 실행합니다. -
Promise 타입 선언과 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="runOrderCoffee1('아메리카노')">Promise Callback Test</button>
</body>
<script>
// 커피를 주문하고 만드는 가상의 비동기 함수
// Promise 타입을 반환 한다.
function orderCoffee(order) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (order === "아메리카노") {
resolve("아메리카노가 나왔습니다");
} else if (order === "라떼") {
resolve("라떼가 나왔습니다");
} else {
reject("죄송합니다 오늘 재료가 모두 소진 되었습니다");
}
}, 1000);
});
}
// 소화 방법 1. -> 'async'와 'await'를 사용하여 비동기 코드를 동기식 방법으로 간결하게 작성할 수 있다.
// 'async'와 'await'를 사용하지 않고 호출 해보기
function runOrderCoffee1(order) {
console.log("start ....");
try {
const result = orderCoffee(order);
console.log(result);
} catch (error) {
console.error(error);
}
console.log("end ....");
}
</script>
</html>결과보기
💡 resolve 와 reject 란
resolve와 reject는 Promise의 생성자 함수 내부에서 제공되는 콜백 함수의 매개변수입니다. 각각의 매개변수는 특정 함수를 나타내며, 이 함수들을 호출함으로써 Promise의 상태를 변경할 수 있습니다.
resolve :
resolve는 함수 타입의 매개변수입니다.
resolve 함수가 호출되면, 해당 Promise의 상태는 pending(대기)에서 fulfilled(이행)로 변경됩니다.
resolve 함수에 전달된 값은 Promise의 결과 값이 됩니다. 이 값은 .then() 메서드의 첫 번째 콜백 함수로 전달됩니다.
예: 위의 코드에서 "아메리카노가 나왔습니다" 또는 "라떼가 나왔습니다"는 .then()에서 받을 수 있는 값입니다.
reject :
reject 역시 함수 타입의 매개변수입니다.
reject 함수가 호출되면, 해당 Promise의 상태는 pending(대기)에서 rejected(거부)로 변경됩니다.
reject 함수에 전달된 값은 Promise의 거부 이유가 됩니다. 이 값은 .catch() 메서드 또는 .then()의 두 번째 콜백 함수로 전달될 수 있습니다.
예: 위의 코드에서 "죄송합니다 오늘 재료가 모두 소진 되었습니다"는 .catch()나 .then()의 두 번째 콜백에서 받을 수 있는 값입니다.
이렇게 resolve와 reject를 사용하면 비동기 작업의 결과나 오류를 알릴 수 있으며, 이에 따라 후속 처리를 진행할 수 있습니다.async function runOrderCoffee1(order) {
console.log("start ....");
try {
const result = await orderCoffee(order);
console.log(result);
} catch (error) {
console.error(error);
}
console.log("end ....");
}결과보기
두번째 소화 시키는 방법 살펴 보기
// 소화 방법 2. -> then()과 catch() 메서드 활용
function runOrderCoffee2(order) {
console.log("start ....");
orderCoffee(order)
.then((message) => {
console.log(message);
})
.catch((error) => {
console.error(error);
});
console.log("end ....");
}HTML 코드에서 호출하는 메서드를 변경해주세요
ex) Promise Callback Test
결과 확인
전체 코드 살펴 보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="runOrderCoffee2('녹차')">Promise Callback Test</button>
</body>
<script>
// 커피를 주문하고 만드는 가상의 비동기 함수
// Promise 타입을 반환 한다.
function orderCoffee(order) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (order === "아메리카노") {
resolve("아메리카노가 나왔습니다");
} else if (order === "라떼") {
resolve("라떼가 나왔습니다");
} else {
reject("죄송합니다 오늘 재료가 모두 소진 되었습니다");
}
}, 1000);
});
}
// 소화 방법 1. -> 'async'와 'await'를 사용하여 비동기 코드를 동기식 방법으로 간결하게 작성할 수 있다.
// 'async'와 'await'를 사용하지 않고 호출 해보기
async function runOrderCoffee1(order) {
console.log("start ....");
try {
const result = await orderCoffee(order);
console.log(result);
} catch (error) {
console.error(error);
}
console.log("end ....");
}
// 소화 방법 2. -> then()과 catch() 메서드 활용
function runOrderCoffee2(order) {
console.log("start ....");
orderCoffee(order)
.then((message) => {
console.log(message);
})
.catch((error) => {
console.error(error);
});
console.log("end ....");
}
</script>
</html>