콜백지옥을 벗어나자

콜백 함수의 단점 : 콜백지옥이 생긴다.

벗어나기 위해서 사용되는 것 : new Promise 혹은 await/async

둘 다 Promise를 return 한다는 점에서 역할이 비슷하다. Promise는 이전 포스팅에서 간략히 설명을 한것이 있다. 다시 한번 짧게 설명하면 Promise는 resolve 와 reject를 만들 수 있다. Promise를 사용하려면 함수 내에 명시적으로

    function example(){
         return new Promise((resolve, reject)=>{

       })
    }

new Promise 선언을 하고 resolve,reject를 만들어서 .then() 혹은 .catch()로 다음 작업을 실행할 수 있게 했다.

이제 Await/Async 를 보자.

    function myFunc(){
      return 'func'
    }

    async function myAsync(){
      return 'async'
    }

이 두가지 함수를 F12를 누른뒤 콘솔창에 입력한다.

    console.log(myFunc())
    console.log(myAsync())

콘솔을 입력하여 확인해본다.

결과는 어떻게 나왔는가 ??

    func
    Promise {<resolved>}: 'async'}

라고 나왔다.

Myasync 는 결과값으로 Promise를 return 한다는것을 알 수 있다.

그래서 async는 뭐냐 ?? 바로 Promise를 return 하는 함수로 만들어준다는 것.

Promise 를 return 한다는 것은 .then 을 쓸 수 있다는 것이다.

myAsync 를 호출하면 Promise 를 return 하니까, .then 을 사용할 수 있다.!!(Promise에서도 then을 통해 resolve를 가져온것과 같이) 자꾸 같은말 반복하네요

    myAsync().then((result)=>{
            console.log("결과",result)
    })

를 입력하면 어떻게 될까 ???

myAsync() 의 결과값(return값)인 async가 .then의 result로 들어간다. 그리고 console.log("결과",result)에서 사용된다. (비동기에서 에러를 다루는 것은 이부분에서 다루지 않는다.)

이제 Async의 짝인 await을 알아보자.

await은 이름에서도 알 수 있듯이 무언가를 기다리는 것이다. 뭘 기다리느냐, Promise 를 return 하는 함수의 resolove값을 받아오기를 기다린다!!

무슨말인지 내가 이해했던 코드를 보면서 설명하자면 ..

    1  function delayP(sec){
    2     return new Promise((reslove,reject)=>{
    3        setTimeout(()=>{
    4             resolve(new Date().toISOString());
    5       }, sec*1000)
    6     })
    7  }

    8  async function myAsync(){
    9     await delayP(3);
    10     return 'async'
    11  }

    12  myAsync().then((result)=>{
    13     console.log(result)
    14  })

line 9의 await dealyP(3)를 보면서 해석하면, delayP(3)이 resolve될 때 까지 기다겠다는 것이다. await은 Promise 객체를 반환하는 method를 사용할 수도 있고, 일반 함수를 넣어도 사용할 수 있다.

    function normal(){
       return '일반함수'
    }

이런 일반 함수도 await에 사용할 수 있다.

await에서 delayP(3)의 resolve 값을 기다린 뒤에 return 'async'를 진행하겠다 라는 의미가 된다…

정리 :

1. async은 일반함수 쓰듯이 작성을 하고 앞에 async를 붙여서 사용한다. 그 함수의 결과값 즉, return 값이 Promise의 resolve값이 된다!!
2. await는 await이 쓰여진 함수가 처리될 때 까지 기다린다는 것. 근데 만약 await이 쓰여진 함수가 Promise라면 resolve가 될 때까지 기다리고, 일반함수라면 return 되기를 기다린다는 것.

코드를 짜기 쉽게, 우리가 생각하는 로직을 표현하는것에 Promise 를 사용하는게 편할 수 있고, await/async 를 사용하는게 편할 수 있다.

이곳에서 많은 도움을 받았습니다. https://www.youtube.com/watch?v=JzXjB6L99N4&t=16s