[JavaScript] 비동기 통신 기초 : Promise 타입

Promise 객체

  - 비동기적으로 실행되는 작업을 처리하고, 그 결과를 콜백 함수 등을 이용해 처리하는 객체

  - 어떤 작업의 결과를 반환하는 객체

 

#  Promise의 상태

  1) 대기 (Pending)

      : Promise 객체가 생성되었으나, 아직 처리가 진행되지 않은 상태

  2) 이행 (Fulfilled)

      : Promise 객체가 처리를 완료하여 결과를 반환한 상태

  3) 거부 (Rejected)

      : Promise 객체가 처리를 실패했거나, 오류가 발생한 상태

 

 

---

비동기 작업 처리

 

  - 자바스크립트 엔진은 싱글 스레드로 동작함

 

  ▶ Call Stack 

      : 현재 실행 중인 함수를 기록하는 스택

      · Java의 스택 메모리와 유사

 

  ▶ Message Queue (Task Queue)

      : 비동기 작업이 완료되었을 때 등록되는 작업 목록

 

  ▶ Event Loop

      : Call Stack과 Message Queue를 주시하면서,

        Call Stack이 비어 있을 때 Message Queue에서 작업을 꺼내와 실행함

 

 

반응형

728x90

---

setTimeout() 함수 활용

#  예시 1

console.log("test3 start");
// resolve : 
// reject : 
let response = new Promise((resolve, reject) => {
    // 2초(2000ms) 뒤에 해당 코드가 실행되도록 함
    setTimeout(() => { // Task Queue에 등록
        console.log("통신 완료");
        let data = 10;
        resolve(data);
    }, 2000);
});           
// 2초 뒤에 동작하는 setTimeout()보다 먼저 실행
// 값을 가져오지 못하고 Promise object 타입이라는 것만 받아와짐
console.log("값 : " + response);
console.log("test3 end");

 

#  예시 2

  - 예약어 async

      : 비동기 함수가 되기 위한 키워드

  - 예약어 await

      : Promise 타입이 처리될 때까지 기다리라는 키워드

 

  → 예시 1과 달리, setTimeout() 함수의 지연 시간이 끝난 후 값을 받을 때까지 기다리다가,

       통신이 완료되고 Promise 객체에 값이 담기고 나면 코드가 실행됨

 

async function test4() {
    console.log("test4 start");
 
    // await가 컴파일 시점에 확인됨
    // await가 있으면 async라는 예약어를 function 앞에 반드시 지정해주어야 컴파일 시점 오류가 사라짐
    let response = await new Promise((resolve, reject) => {
        setTimeout(() => { // Task Queue에 담김
            console.log("통신 완료");
            let data = 10;
            resolve(data); // 실행
        }, 2000);
    });          
 
    // data를 받아와, 10이 출력됨
    console.log("값 : " + response);
    console.log("test4 end");
}

 

 

---

비동기 통신의 기본 형식

<button onclick="runAsyncTask()">Promise Callback Test</button>
 
<script>
    function doAsyncTask() {
        return new Promise(function (resolve, reject) {
            let success = false;
            
            setTimeout(() => { // 여기 내부는 Task Queue에 저장
                // 성공 시
                if (success) {
                    resolve("정상적으로 수행을 완료함"); // 해당 값 return
                // 실패 시
                } else {
                    reject("비정상적으로 동작을 처리함"); // 해당 값 return
                }
            }, 3000);
        });
    }
 
    async function runAsyncTask() {
        console.log("test start");
 
        // 예외 처리
        try {
            // 비동기 함수 실행
            const result = await doAsyncTask();
            console.log(result);
        } catch (error) {
            console.log(error);
        }
        
        console.log("test end");
    }
</script>