[JS] Promises & async & await

• asnyc/await 는 비동기 코드를 작성하는 새로운 방법이다. 이전에는 비동기코드를 작성하기 위해 callback이나 promise를 사용해야 했다.
• asnyc/await 는 실제로는 최상위에 위치한 promise에 대해서 사용하게 된다. Asnyc/await는 plain callback 이나 node callback과 함께 사용할 수 없다.
• async/await는 promise처럼 non-blocking 이다.
• async/await는 비동기 코드의 겉모습과 동작을 좀 더 동기 코드와 유사하게 만들어준다. 이것이 async/await의 가장 큰 장점이다.

문법

getJSON함수를 예로 들어보자. 이 함수는 promise를 반환하고, JSON 오브젝트로 resolve된다. 우리는 간단하게 이 함수를 호출하고, JSON의 로그를 남기고, "done"을 반환할 것이다.

다음은 promise를 사용해서 구현한 예이다.

const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log(data)
      return "done"
    })

makeRequest()

 

그리고 다음은 async/await를 사용했을 때의 예이다.

const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}

makeRequest()

둘 사이에는 몇가지 차이점이 있다.

1. 함수의 앞에 async 라는 단어가 오게된다. await 키워드는 오직 async 로 정의된 함수의 내부에서만 사용될 수 있다. 모든 async 함수는 암묵적으로 promise를 반환하고, promise가 함수로부터 반환할 값(예제에서는 "done" 이라는 문자열)을 resolve 한다.
2. 위와 같은 점 때문에 우리는 await 를 우리 코드의 탑 레벨에서는 사용할 수 없다. async 함수 안에 위치한 경우에만 사용이 가능하다.

// this will not work in top level
// await makeRequest()

// this will work
makeRequest().then((result) => {
  // do something
})

3. await getJSON() 는 console.log 의 호출이 getJSON() promise가 resolve된 후에 일어나고, 그 후에 값을 출력할 것이라는 것을 의미한다.