async / await Function

1. async Function 개요

직역하면 비동기적으로 수행되는 함수.

JavaScript상의 모든 Asynchronous Function은 사실 async Function이다.

aysnc Function은  반드시 그 내부에

return Promise(function(resolve, reject)) // 형태와 같이 Promise 객체를 반환하는 것이 암묵적으로 정의되어있다.

 

따라서 

Interface
Parameter	사용자가 정의 가능
Return	Promise Object (성공시 함수의 return 결과를 then으로 받고 실패시 catch로 받음)

2. await 개요

async Function의 함수 내부의

statement가 비동기적으로 수행된다면

await 이 걸린 부분은 반드시 그 결과값을 받아오길 "기다린다"

 

비동기적 함수의 흐름중에 동기적 동작이 필요한 경우 await이 쓰인다. // 목적

 

※ await은 async Function (ex. 또 다른 async, promise function) 에만 쓰인다. (동기적 함수 내부에서 await을 쓸 이유도, 필요도 없기 때문이다)

 

 

---

3. 예제

function delay_promise(second){
  return new Promise(function(resolve, reject){
    if(second >= 100){
      reject('100초 넘는거 극혐');
    } else{
      setTimeout(function(){
        resolve(new Date().toISOString())
      }, second * 1000);
    }
  });
}

async function waitPro(second){
  console.log('일단 함수 호출됨.')
  let waiting_time = await delay_promise(second).
  then(function(result){
    return result;
  }).
  catch(err=>{
    return err;
  });
  console.log(waiting_time);
  console.log('진짜 await 끝날 때 까지 기다리네?');
  return waiting_time;
}
result = waitPro(3);
console.log('나는 메인');
// console.log(result);

 

위 코드를 읽고 실행 순서를 예상해보자

 

 

코드 실행 순서를 표기했다.

실행 결과

 

◎ 먼저 delay_promise 라는 함수, async function waitPro 의 정의 이후 waitPro(3)으로 함수를 호출했다.

 

①async함수  '일단 함수 호출됨' 콘솔 로그

 

② 'Asynchronous Function'이기 때문에 메인 thread에의해 비동기적으로 '나는 메인'이라는 콘솔이 먼저 찍힌다.

(∵ 'async' 키워드는 곧 비동기함수를 의미, 스택 세그먼트의 함수의 수행이 끝나기를 기다리지 않는다)

 

③ delpay_promise 라는 함수의 실행이 완료된다.

delay_promise의 반환값은resolve에 의해 실행된 값을 받아온 then의 result이다.

따라서 waiting_time에는 then구문에서 resolve('@@@@')의 @@@@가 담긴다. (여기서 @@@는 현재시간이다)
(∵ delay_promise 앞에 'await'이 붙어있어 delay_promise 함수가 return될 때까지 그 아래의 코드가 실행되지 않고 기다린다.)

 

④ waiting_time에 담긴 @@@@ (현재시간)을 출력한다.

 

---

 

4. 예제2

 

이 코드의 예상 결과와 문제점을 지적해보자.

 

실행 결과다.

 

얼핏 보면 문제 없어보일 수도 있지만..

 

 

이부분이 애매하다.

 

왜냐하면 async Function의 return은 Promise객체이고 

Promise 객체의 값은 2부류로 나뉜다. (resolve, reject)

코더 입장에서야 new Error 부분이 에러인것으로 읽고 넘어갈 수 있지만

return으로 받을 경우 호출부에서는 정상적으로 리턴한 것으로 간주한다.

=> then, catch에서 무조건 then으로 받는 원인이 된다.

 

 

then의 console.log를 주석처리해보면

에러 메시지가 출력되지 않는다.

 

 

고로 catch에서 에러를 잡아온 것이 아니라 then의 result에서 출력했던 것이다

 

∴ async function 내부에서 return대신 throw을 통해 Error 객체를 날려줘야 catch로 잡을 수 있다.

 

throw를 통해 Error Object를 날렸기 때문에 catch로 잡을 수 있음!

 

---

5. 사용 Tip

• 비동기 함수 내부에서 await으로 블로킹이 필요할 때 -> 여러번 사용 가능
• async function은 결국 promise sugar code style일 뿐이다.
• 함수가 2개 이상이고 각각의 함수가 종속성을 갖는다면 async/await 사용
• 너무 큰 범위 내에서 async function을 잡지말고 function 단위를 작게 사용할 것. (너무 많은 blocking code 방지)

---

6. Reference

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

hackernoon.com/should-i-use-promises-or-async-await-126ab5c98789

dev.to/gafi/7-reasons-to-always-use-async-await-over-plain-promises-tutorial-4ej9?signin=true