JavaScript - async & await

* .then을 대체할 수 있는 다른 방법(더 간단하고 간결한 방법 / 더 자주 사용됨)

1) 왼쪽 코드 : timer(1000), 즉 코드가 정상적으로 실행이 된다면, 

                      1초 후에 .then이후 코드가 실행이 되게 끔 (결과값 = '작업')

 

2) 오른쪽 코드 : 1)과 똑같이 실행이 되고,

                           async + await 는 함수와 항상 같이 써야만 작동이 됨.

                           함수( function )앞에 항상 async를 써줘야 하고,

                           함수 안에 await를 작성해주고, 

                           마지막에 함수명( 여기서는 run())을 입력해주면 실행이 됨.

 

 

 

* 또 다른 예시

** promise를 이용한 예시_아래에 async await이용한 예시랑 비교해보기

function Timer(time){
  return new Promise(function(resolve){
      setTimeout(function(){
      resolve(time)
    }, time)
  })
}
console.log('start');
Timer(1000).then(function(time){            --- timer(1000)이 실행이 되면(.then)
    console.log('time :'+time);		    --- console.log('time :' + 1000) 이 실행이 됨
                                                즉, time : 1000이 콘솔창에 출력됨
    return Timer(time+1000);               --- 이어서 리턴값으로 timer+1000이 주어지면서,
                                               Timer(2000)이 실행되고
}).then(function(time){                    --- .then(function(2000){
    console.log('time :'+time);            --- console.log('time :' + 2000)이 출력됨
    return Timer(time+1000); 			   --- 리턴 값으로 Timer(2000+1000) 즉 Timer(3000)이 
                                               주어짐
}).then(function(time){                    --- 그리고 이어서 (.then) function(3000){
  console.log('time :'+time);              --- console.log('time :' + 3000)
  console.log('end');
})


: 콘솔창에는
start
time :1000
time :2000
time :3000
end
이 순서대로 출력이 됨

 

 

* 위 코드를 async await으로 대체해서 사용하기

   1) 비동기적으로 실행된다는 걸 보여주기 위해 앞에 await를 붙임 # 1

   2) 결과값(즉, 파라미터<여기서는 time>를 이렇게 받을 수 있음) # 2

 

function Timer(time){
  return new Promise(function(resolve){
      setTimeout(function(){
      resolve(time)
    }, time)
  })
}

async function run(){                             --- # 1
  console.log('start');
  var time = await Timer(1000)                    --- # 2
  console.log('time :'+time);
  time = await Timer(time+1000);
  console.log('time :'+time);
  time = await Timer(time+1000);
  console.log('time :'+time);
  console.log('end');
}
run();