Web/Javascript

JS - async function, Promise를 활용하여 비동기 작업 수행하기, 비동기 작업을 동기로 처리하기

luvris2 2023. 11. 17. 08:37
반응형

서론

각각의 작업 a, b, c가 있다.

a는 5초가 걸리고, b는 10초, c는 3초가 걸린다.

작업을 순차적으로 기다리면서 처리하게 된다면 이 작업은 총 5+10+3 으로 총 18초가 걸리게 된다.

그럼 각각의 작업을 일괄적으로 처리하게 하려면 어떻게 해야 할까?

정답은 비동기 작업으로 해당 작업들을 수행하면 된다.

이 포스팅에서는 비동기 방법 중 Promise 객체에 대해 다룬도록 한다.

Promise

개념

  • 비동기 작업의 완료 또는 실패에 따른 결과 값을 나타내는 객체
  • 비동기 메서드에서 마치 동기 메서드처럼 반환할 수 있음
  • 세 가지의 상태가 존재
    • 대기(pending) : 초기 상태
    • 이행(fulfilled) : 비동기 작업 성공
    • 거부(rejected) : 비동기 작업 실패
  • 상태에 따라 then 메서드에 의해 작업들의 처리 결과를 호출

기본 구문

기본 구문은 모질라 공식문서의 샘플 코드를 사용하였다.

let myFirstPromise = new Promise((resolve, reject) => {
  // 우리가 수행한 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출합니다.
  // 이 예제에서는 setTimeout()을 사용해 비동기 코드를 흉내냅니다.
  // 실제로는 여기서 XHR이나 HTML5 API를 사용할 것입니다.
  setTimeout(function () {
    resolve("성공!"); // 와! 문제 없음!
  }, 250);
});

myFirstPromise.then((successMessage) => {
  // successMessage는 위에서 resolve(...) 호출에 제공한 값입니다.
  // 문자열이어야 하는 법은 없지만, 위에서 문자열을 줬으니 아마 문자열일 것입니다.
  console.log("와! " + successMessage);
});
  • Promise() : 새로운 Promise 객체를 생성하는 생성자, 주로 프로미스를 지원하지 않는 함수를 감쌀 때 사용
  • Promise.resolve() : 비동기 작업이 처리된 결과 값이 포함된 Promise 객체를 반환, then을 사용할 경우 then 메서드에서 주어진 값을 반환
  • Promise.reject(reason) : 비동기 작업이 실패한 Promise 객체를 반환
  • setTimeout : 비동기적인 동작을 수행하는 함수, 숫자는 밀리초 단위 (1초 = 1000)

* resolve, reject는 생성자에서 주어진 인자(resolve, reject)를 사용하여 값을 반환할 수도 있다. 예) resolve("성공!")

async function

  • 하나의 비동기 함수를 정의하여 AsyncFunction 객체를 반환하는 함수
  • 암시적으로 Promise 객체를 사용하여 결과를 반환함
    • 만약 반환값이 명시적으로 Promise가 아닐 경우, 암묵적으로 Promise로 감싸짐
  • async 함수에는 await 키워드를 사용하여 동기 처리와 같은 방식으로 작업을 할 수 있음 
    • await 사용 시, 실행을 일시 중지하고 전달된 Promise의 결과를 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환함
  • await 키워드는 async 함수에만 사용할 수 있음
    • async 외의 함수에서 사용 시 Syntax Error 발생

기본 구문

기본 구문은 모질라 공식문서의 샘플 코드를 사용하였다.

async function name([param[, param[, ... param]]]) {
        statements
    }
  • name : 함수의 이름
  • param : 함수에게 전달되기 위한 인자의 이름
  • statements : 함수 본문을 구성하는 내용, 이 곳에 await 키워드를 사용할 수 있음

예제1 : 비동기 작업 일괄 처리하기

각각의 작업을 모두 비동기로 일괄 처리해보자.

  • 작업 A : 소요시간 5초
  • 작업 B : 소요시간 10초
  • 작업 C : 소요시간 3초

모두 작업을 일괄적으로 비동기로 처리하여야 하기 때문에

작업의 순서는 '작업C > 작업A > 작업B' 순으로 처리되어야 한다.

<script>
    window.onload = function() {
		// 5초 뒤 'a'를 반환하는 비동기 작업
        workA();
		// 10초 뒤 'b'를 반환하는 비동기 작업
        workB();
		// 3초 뒤 'c'를 반환하는 비동기 작업
        workC();
    };

    function workA() {
        return new Promise(function(resolve) {
            setTimeout(function() {
                resolve( console.log('a') );
            },5000);
        });
    }

    function workB() {
        return new Promise(function(resolve) {
            setTimeout(function() {
                resolve( console.log('b') );
            },10000);
        });
    }

    function workC() {
        return new Promise(function(resolve) {
            setTimeout(function() {
                resolve( console.log('c') );
            },3000);
        });
    }
</script>

 

 

  • 콘솔 확인 화면 : 정상적으로 c, a, b 작업이 순차적으로 진행되는 것을 확인할 수 있다.

예제2 : 비동기 작업을 동기로 처리하기

예제1번과는 다르게 특정 비동기 작업을 흐름에 맞게 동기적으로 처리해야하는 경우가 있다.

예를 들면, 로그인 세션을 확인하는 과정에서 세션 정보를 확인 후 페이지를 보여줘야 한다면?

세션 확인은 서버와 통신해야하기 때문에 비동기로 처리할 수 밖에 없다.

이런 경우, 세션을 받고 나서 작업을 수행하여야 한다.

그렇다면 예제1과 같은 작업에서 비동기로 처리된 작업을 동기적으로 진행해야 하는 경우를 알아보자.

  • 작업 A : 소요시간 5초
  • 작업 B : 소요시간 10초
  • 작업 C : 소요시간 3초

위와 같은 경우라면 실제 실행되는 과정은 '작업A > 작업C > 작업B' 순으로 진행 되게 된다.

우리는 작업B가 포함된 전체 작업을 '작업A > 작업B > 작업C' 순으로 동기적으로 처리하려 한다.

 

우선 await 메커니즘을 살펴보자.

  1. 작업 A에서 5초를 소요하고 'a' 를 반환한다.
  2. 작업 B에서 비동기 작업으로 10초를 소요하여 'b'를 반환해야 하지만,
    await 키워드를 사용하여 전체 작업을 일시 중지 하고 Promise의 반환을 기다린 다음 전체 작업을 다시 시작한다.
  3. 작업 B의 Promise가 반환되면 작업 C에서 3초를 소요하고 'c'를 반환한다.
<script>
    window.onload = async function() {
		// 5초 걸리는 동기 작업
        workA();
		// 10초 걸리는 비동기 작업 : await를 사용하여 동기적으로 처리하도록 변경
        await asyncWorkB();
		// 3초 걸리는 동기 작업
        workC();
    };

	// 5초 뒤 'a' 를 콘솔에 출력하는 함수
    function workA() {
        setTimeout(function() {
        	console.log('a');
        }, 5000);
    }

	// 10초 뒤 'b' 를 콘솔에 출력하는 함수
    async function asyncWorkB() {
        return new Promise(function(resolve) {
            setTimeout(function() {
                resolve( console.log('b') );
            },10000);
        });
    }

    // 3초 뒤 'c' 를 콘솔에 출력하는 함수
    function workC() {
        setTimeout(function() {
            console.log('c');
         }, 3000);
    }
</script>

 

  • 콘솔 확인 화면 : 정상적으로 a, b, c 작업이 순차적으로 진행되는 것을 확인할 수 있다.

예제3. then을 사용하여 비동기 작업 처리하기

이번엔 then을 사용하여 비동기 작업을 수행하도록 해보자.

아래의 코드는 1초 뒤 비동기 작업이 성공된다는 메시지가 반환되는 코드이다.

<script>
    window.onload = function() {
        // Promise then 사용
        asyncFunc()
        // .then을 사용하여 주어진 결과를 반환할 수 있음
        .then(result => {
            console.log('결과:', result);
        })
        // .catch를 사용하여 에러를 제어할 수도 있음
        // .catch(error => {
        //     console.error('오류:', error);
        // });
    };

	// 비동기 작업 함수
    function asyncFunc() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                const data = "비동기 작업 성공";
                resolve(data); // 성공 시 반환되는 값
            }, 1000);
        });
    }
</script>

 

  • 콘솔 확인 화면 : then을 사용하여 비동기 작업을 수행하고 then 메서드 내에 있는 콘솔 출력으로 값을 반환

비동기 작업의 성공, 실패 반환하기

비동기 작업에서 성공과 실패 상태를 확인하여 상황에 따라 값을 다르게 반환할 수 있다.

주로 에러를 확인하기 위해 사용하는데, 다음과 같은 코드를 통해 실패의 반환값을 확할 수 있다.

비동기 작업의 절차는 위에 모두 다뤘기 때문에 여기서 추가 설명은 따로 하지 않겠다.

window.onload = function() {
    // Promise then 사용
    asyncFunc()
    .then(result => {
        console.log('결과:', result);
    })
    .catch(error => {
        console.error('오류:', error);
    });
};

function asyncFunc() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = "비동기 작업 성공";

            // 조건을 주어 결과에 따라 성공과 실패를 확인할 수 있다.
            if (data > 0.5) { // 의도적으로 문자열을 숫자와 비교하여 실패하도록 함
                resolve(data); // 성공
            } else {
                reject("비동기 작업 실패"); // 실패
            }
        
        }, 1);
    });
}

 

  • 콘솔 확인 화면 : 의도적으로 비동기 작업을 실패하여 실패 반환 값을 리턴 받는 경우

참고

반응형
저작자표시 동일조건