async await 사용법

promise에 이어서 async await 사용법을 살펴보겠습니다. promise에 대해 모르신다면

https://ms3864.tistory.com/22  를 보고 오는것을 추천합니다.

promise 사용법

 

 async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는것과 많이 비슷합니다.

 

간단한 예제를 살펴보겠습니다.

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

 

async function asyncCall() {

  console.log('calling');

  const result = await resolveAfter2Seconds();

  console.log(result);

  // expected output: 'resolved'

}

 

asyncCall();

 

콘솔창에 입력시

calling

Promise {<pending>}

resolved

가 나오면 성공입니다.

만약 async 함수를 사용하지 않았다면 result의 값이 들어가기 전에 console.log(result)가 찍혀서 원하지 않는 값을 얻을 것 입니다.

 

다음은 await에 대한 설명입니다.

async 함수에는 await식이 포함될 수 있습니다. 이 식은 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환합니다.

await 키워드는 async 함수에서만 유효하다는 것을 기억하십시오. async 함수의 본문 외부에서 사용하면 SyntaxError가 발생합니다.

 

조금 더 복잡한 예제를 살펴보겠습니다.

var resolveAfter2Seconds = function () {

  console.log("starting slow promise");

  return new Promise((resolve) => {

    setTimeout(function () {

      resolve(20);

      console.log("slow promise is done");

    }, 2000);

  });

};

 

var resolveAfter1Second = function () {

  console.log("starting fast promise");

  return new Promise((resolve) => {

    setTimeout(function () {

      resolve(10);

      console.log("fast promise is done");

    }, 1000);

  });

};

 

var sequentialStart = async function () {

  console.log("==SEQUENTIAL START==");

 

  // If the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise.

  const slow = await resolveAfter2Seconds();

  console.log(slow);

 

  const fast = await resolveAfter1Second();

  console.log(fast);

};

 

var concurrentStart = async function () {

  console.log("==CONCURRENT START with await==");

  const slow = resolveAfter2Seconds(); // starts timer immediately

  const fast = resolveAfter1Second();

 

  console.log(await slow);

  console.log(await fast); // waits for slow to finish, even though fast is already done!

};

 

var stillConcurrent = function () {

  console.log("==CONCURRENT START with Promise.all==");

  Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => {

    console.log(messages[0]); // slow

    console.log(messages[1]); // fast

  });

};

 

var parallel = function () {

  console.log("==PARALLEL with Promise.then==");

  resolveAfter2Seconds().then((message) => console.log(message));

  resolveAfter1Second().then((message) => console.log(message));

};

 

먼저 위에 코드를 입력하세요

 

ex1)

sequentialStart(); // after 2 seconds, logs "slow", then after 1 more second, "fast"

 

===>

==SEQUENTIAL START==
starting slow promise
slow promise is done
20
starting fast promise
fast promise is done
10

await를 resolveAfter2Seconds, resolveAfter1Seconds 함수에

사용했기때문에 20이 2초뒤에 나타나고 10이 1초뒤에 나타납니다. 

이해가 잘 안된다면 코드를 천천히 살펴보세요. 

 

ex2)

concurrentStart();

 

===>

==CONCURRENT START with await==
starting slow promise
starting fast promise
fast promise is done
slow promise is done
20
10

await를 resolveAfter2Seconds, resolveAfter1Seconds 함수가 아닌 console.log의 변수안에 사용했기 때문에

함수가 실행되고 20이 2초뒤에 10이 1초뒤에 나타납니다.

 

ex3)

stillConcurrent();

 

===>

==CONCURRENT START with Promise.all==

starting slow promise
starting fast promise
fast promise is done
slow promise is done
20
10

  1초 뒤에 fast promise is done이

  다시 1초뒤에 slow promise is done이 실행됩니다.

 

※ Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다.

 

실행을 resolveAfter2Seconds, resolveAfter1Seconds 두개 동시에 했기 때문에

  처음부터 1초지남 -- fast promise is done 실행

  처음부터 2초지남 -- slow promise is done 실행

이 됩니다.

그리고 console.log는 slow, fast 순으로 찍었기 때문에 20, 10 순으로 로그가 찍힙니다.

이 부분은 이해가 안된다면 한 번 더 보시기를 추천들립니다.

 

ex)4

parallel();

 

===>

==PARALLEL with Promise.then==

starting slow promise
starting fast promise
fast promise is done
10
slow promise is done
20

resolveAfter2Seconds, resolveAfter1Seconds 함수를 각각 실행했기 때문에

  1초뒤에 fast promise is done이

  다시 1초뒤에 slow promise is done이 실행됩니다.

 

ex5)

sequentialStart(); // after 2 seconds, logs "slow", then after 1 more second, "fast"

// wait above to finish

setTimeout(concurrentStart, 1000); // after 2 seconds, logs "slow" and then "fast"

// wait again

setTimeout(stillConcurrent, 7000); // same as concurrentStart

// wait again

setTimeout(parallel, 10000); // trully parallel: after 1 second, logs "fast", then after 1 more second, "slow"

 

===>

이제는 이 코드를 이해할 수 있습니다.

바로 이해가 안된다면 위에서부터 다시 차근차근 생각해보세요

 

글 봐주셔서 감사합니다. 다음에는 조금 더 실용적인 글을 가져오겠습니다.

 

--출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

async function