728x90
반응형
[JavaScript] 17. Promise 타입
1. Promise 타입의 이해
(1) Promise 타입의 개념
(2) Promise 타입의 3가지 상태
- 대기(pending)
- 이행(fulfilled)
- 거부(rejected)
*비동기 통신:
*웹 브라우저=일종의 해석기!
웹 브라우저 내부에는 자바스크립트 엔진이 존재하며, 이는 싱글 스레드로 동작한다.
- 메모리 힙(Memory Heap) 데이터를 임시 저장하는 곳
- 콜 스택(Call Stack)
2. Promise 타입 선언과 활용
(1) async
(2) await
(3) 명시적 체인 (Explicit Chaining)
3. 시나리오 코드
(1) 커피 주문하기
<!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>
(2) 소주 주문하기 -> 재고 소진 메세지
<!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>
(3) then과 catch를 사용해보자
<!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>728x90
반응형
'HTML,CSS, JS > JavaScript' 카테고리의 다른 글
| [JavaScript] 19. 로컬 스토리지 (0) | 2024.08.21 |
|---|---|
| [JavaScript] 18. AJAX와 Fetch (0) | 2024.08.02 |
| [JavaScript] 16. 이벤트 처리 - 배너 변경하기 (0) | 2024.08.01 |
| [JavaScript] 15. 쿼리 셀렉트문과 클래스 선택자 (0) | 2024.08.01 |
| [JavaScript] 14. 이벤트 처리 - 이미지 토글 (0) | 2024.08.01 |