[JavaScript] 17. Promise 타입

2024년 08월 02일

Song hyun
작성자
2024.08.02.:49

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

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 17. Promise 타입

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바