[js] asynchronous

async, await [1]

비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작합니다.

 function fetchItems() {
    return new Promise(function(resolve, reject) {
      var items = [1,2,3];
      resolve(items)
    });
  }

  async function logItems() {
    var resultItems = await fetchItems();
    console.log(resultItems); // [1,2,3]
  }

callback 과 비교

async, await 를 사용할 경우

    async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

기다림이 필요한 부분에 await 연산자 추가.
await가 사용된 함수의 function keyword 앞에 async 추가.

callback function 을 사용할 경우

    function logName() {
    // 아래의 user 변수는 위의 코드와 비교하기 위해 일부러 남겨놓았습니다.
    var user = fetchUser('domain.com/users/1', function(user) {
      if (user.id === 1) {
        console.log(user.name);
      }
    });
}

Read Also

자바스크립트 비동기 처리와 콜백 함수 - 캡틴판교
자바스크립트 Promise 쉽게 이해하기 - 캡틴판교

References

[1] 자바스크립트 async와 await - 캡틴판교