[Javascript] async await으로 순서 조작하기 (동시실행, 순차실행)

Promise를 반환하는 function을 선언하고 .then() 을 통해서 순서를 조작할 수 있기는 하지만,

실제 사용에 있어 코드가 길어지고 읽기 난해해지는 부분이 있는데

이때 javascript에서 제공하는 function의 async await 옵션을 활용하면

좀 더 해석하기 편하게 순서를 조작할 수 있다.

 

아래 두 함수가 있다.

func1()은 2초의 딜레이를 두고 다음동작을 수행하는 Promise function이고,

func2()는 1초의 딜레이를 두고 다음동작을 수행하는 Promise function이다.

 

이와 같은 상황에서 순서를 조작하는 방식은 대략 2가지로 나눌수가 있다.

 - 동시에 두 Promise를 실행시키지만 종료시점을 컨트롤하는 방식

 - 순차적으로 Promise를 컨트롤하는 방식

 

예시)

1. 동시실행 및 종료시점 조작

실행결과 func1과 func2는 동시에 실행되었으나, 데이터는 앞서 실행된 func1의 데이터를 func2의 데이터보다 먼저 받은 것을 확인할 수 있다.

 

2. 순차실행

func1, 2를 호출할 때 await 속성을 각각 지정하면 위의 결과와 같이, 순서대로 실행되는 모습을 확인할 수 있다.

 

** async 속성은 function에만 부여할 수 있으며, await 속성은 async function 내부에서만 선언할 수 있다.

** 만약 최상위계층에서 await 속성을 사용할 필요가 있다면,

그림과 같이 괄호로 감싼 async () 람다식으로 사용할 수 있다.

 

사용코드 첨부

 let func1 = function(){
    console.log("func1 시작");
    return new Promise(resolve => {
        let resolveData = "func1의 데이터를 받았음";
        setTimeout(() => {
            resolve(resolveData);    
            console.log("func1 실행완료");
        }, 2000);
        
    });
  };

  let func2 = function(){
    console.log("func2 시작");
    return new Promise(resolve => {
        let resolveData = "func2의 데이터를 받았음";
        setTimeout(() => {
            resolve(resolveData);
            console.log("func2 실행완료");
        }, 1000);
        
    });
  };

  let test1 = async function(){
    //동시에 함수들을 실행시키지만, 종료시점의 컨트롤이 필요한 경우
    console.log("func1 func2 동시실행");
    let a = func1();
    let b = func2();

    console.log("===============   결과   =============");
    console.log(await a);
    console.log(await b);
  }

  let test2 = async function(){
    //순서대로 함수를 실행시켜야 하는 경우
    console.log("func1 func2 순차적으로 실행");
    let a = await func1();
    let b = await func2();

    console.log("===============   결과   =============");
    console.log(a);
    console.log(b);
  }

  (async () => {
    let aa = await test1();
    let bb = await test2();
  })