callback vs Promise vs await

 

왜 쓸까? 

---

함수를 호출해서 실행할거 아니야? 그러면 이게 순서있게 가야되는데 웹 어플리케이션에 요청하면 이게 비동기적으로 호출이 되서 언제 어떤게 먼저 실행될지 몰라. 그러니깐 비동기적인 실행을 방지하기 위해서 우리가 상황을 조정하는거야 .실제 상황을 보자구

 

화면 리셋하고 비디오를 실행하면

1초뒤에 다시 멈추고 타이틀을 보여주고

0.5초뒤에 타이틀을 강조하고 

2초뒤에 다시 타이틀 리셋

function runCallback() {
  //실행
  resetTitle();
  //실행
  playVideo();
  //실행
  delay(1000, () => {
    pauseVideo();
    displayTitle();

    delay(500, () => {
      highlightTitle();

      delay(2000, resetTitle);
    });
  });
}

 

 

근데 이게 너무 귀찮지 않아? 가로 안에 가로 안에 가로 안에...

그래서 미리 함수를 선언할 때 promise라는 방식을 사용해서 정의를 할거야.

---

const sleep =(wait)=>{
    //resolve가 callback 함수를 정의 resolve에 들어온 함수는 
    return new Promise((resolve)=>{


        setTimeout(resolve,wait)
    })


}


function runPromise(){
   
   //sleep함수가 호출이 되면 
   sleep(1000).then(()=>{

        pauseVideo()
        displayTitle()

    })
    //callback이었으면 함수 실행을 sleep안에 넣어야 하지만 then을 씀으로써 sleep 함수 밖에 함수를 호출해도 
    //절차적으로 함수가 실행이 된다.
    //1초뒤에 실행이 되면 sleep 함수 뒤에는 어떤 함수든 then 을 통해 실행이 된다.
    .then(sleep.bind(null,500))
    .then(slpee.bind(null,2000))
}

Promise로 정의를 해놓고 then 으로 쓰는 것도 싫으면 함수에 async 를 정의하고 1초뒤 0.5초 뒤와 같이 시간 뒤에 await를 설정해 놓으면 비동기적으로 웹 API가 호출될지라도 실행은 함수가 실행되고 await 의 함수가 실행되고 그 다음 await 함수가 실행이 된다.

---

async function runAsync() {
  //기본해야할 함수를 호출하고
  resetTitle();
  playVideo();
  //비동기적 함수들은 async를 설정해줬기 때문에 await를 써서 실행하면 그 다음에 실행이 됨
  await sleep(1000);
  pauseVideo();
  displayTitle();
  //비동기적 함수들은 async를 설정해줬기 때문에 await를 써서 실행하면 그 다음에 실행이 됨

  await sleep(500);
  highlightTitle();
  //비동기적 함수들은 async를 설정해줬기 때문에 await를 써서 실행하면 그 다음에 실행이 됨

  await sleep(2000);
  resetTitle();
}