1. Promise 타입에 대해 알아 보자.
자바스크립트 Promise는 비동기 작업을 처리하기 위한 객체입니다. Promise는 어떤 작업의 결과를 반환하는 객체로서, 이를 통해 비동기적으로 실행되는 작업을 처리하고 그 결과를 콜백 함수 등을 이용해 처리할 수 있습니다.
Promise는 총 3가지 상태를 갖습니다.
- 대기(pending): Promise 객체가 생성되었으나 아직 처리가 진행되지 않은 상태입니다.
- 이행(fulfilled): Promise 객체가 처리를 완료하여 결과를 반환한 상태입니다.
- 거부(rejected): Promise 객체가 처리를 실패하였거나 오류가 발생한 상태입니다.
사전 기반 지식 - 자바스크립트 엔진(v8)
js 엔진 내부만 보면 크게 Memory Heap & Call stack 2개의 파트가 있다.
Memory Heap
- 데이터를 임시 저장하는 곳으로, 함수나 변수, 함수를 실행할 때 사용하는 값들을 저장한다. heap 저장공간 을 떠올리면 된다.
- 해당 부분에서 이제 더 이상 사용되지 않는 변수나 데이터 덩어리를 비워주는 GC(Garbage Collection) 가 있다.
Call stack
- 코드가 "실행"되면 순서를 기록해 놓고, 하나씩 순차적으로 꺼내서 실제로 실행할 수 있도록 도와주는 공간이다. stack 자료구조 형태이며 Last In, First Out ( LIFO ) 원칙을 따른다.
2. Promise 타입 선언과 활용
첫번째 소화 시키는 방법 살펴 보기
async/await 사용 방식
<!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>
<script>
// 커피를 주문하고 만드는 가상의 비동기 함수 선언
// Promise 타입을 반환한다(객체를 반환)
function orderCoffee(order) {
return new Promise( function(resolve, reject) {
// 기존 제공하는 setTimeout API 활용
setTimeout(function() {
if(order === "아메리카노" ) {
resolve("아메리카노가 나왔습니다.");
} else if( order === "라떼") {
resolve("라떼가 나왔습니다.");
} else {
reject("죄송합니다 오늘 재료가 모두 소진 되었습니다");
}
}, 2000);
});
}
// Promise 타입을 소화 시키는 방법 - 1
// 'async' 키워드와 await 를 사용하여 비동기식 코드를 동기식 방법으로 간결하게 소화 시킬 수 있다.
// 주의 - 비동적 방식이다.
async function runOrderCoffee1(order) {
console .log("start ......................");
try {
const result = await orderCoffee(order);
console.log(result);
} catch(error) {
console.log(error);
}
console .log("end ......................");
}
</script>
</body>
</html>
두번째 소화 시키는 방법 살펴 보기
명시적 체인 (Explicit Chaining) 사용 방법
then, catch, finally 메서드를 통해 콜백 함수를 체인으로 연결하는 방식
<!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>
<script>
// 커피를 주문하고 만드는 가상의 비동기 함수 선언
// Promise 타입을 반환한다(객체를 반환)
function orderCoffee(order) {
return new Promise( function(resolve, reject) {
// 기존 제공하는 setTimeout API 활용
setTimeout(function() {
if(order === "아메리카노" ) {
resolve("아메리카노가 나왔습니다.");
} else if( order === "라떼") {
resolve("라떼가 나왔습니다.");
} else {
reject("죄송합니다 오늘 재료가 모두 소진 되었습니다");
}
}, 2000);
});
}
// Promise 타입을 소화 시키는 방법 - 1
// 'async' 키워드와 await 를 사용하여 비동기식 코드를 동기식 방법으로 간결하게 소화 시킬 수 있다.
// 주의 - 비동적 방식이다.
async function runOrderCoffee1(order) {
console .log("start ......................");
try {
const result = await orderCoffee(order);
console.log(result);
} catch(error) {
console.log(error);
}
console .log("end ......................");
}
// 소화시키는 방법 2 -> then() 과 catch() 메서드 활용
function runOrderCoffee2(order) {
console .log("start ......................");
orderCoffee(order)
.then((message) => {
console.log(message);
})
.catch((error) => {
console.log(error);
});
console .log("end ......................");
}
</script>
</body>
</html>
'JS' 카테고리의 다른 글
| 로컬스토리지(localStorage)란? (0) | 2024.09.25 |
|---|---|
| 이벤트 처리 - 8(AJAX 와 Fetch API) (0) | 2024.09.25 |
| 이벤트 처리 - 6(배너변경하기) (0) | 2024.09.25 |
| 이벤트 처리 - 5(이미지 토글) (0) | 2024.09.25 |
| 이벤트 처리 - 4(반복문과 동적생성) (0) | 2024.09.25 |
