[JavaScript] Asynchronous - async/await

async/await

async 와 await 는 Promise 를 작성하기 쉽게 만들어주는 syntax 이다.

async 는 함수가 Promise 를 반환하도록 만들어준다.
await 은 함수가 Promise 를 기다리도록 만들어준다.

async

// 함수 앞에 async를 붙이면 함수가 Promise를 반환하도록 만든다.
async function func1() {
  return 1;
}
func1().then(console.log); // 1

async function func1() {
  return Promise.resolve(1);
}
func1().then(console.log); // 1

// async ensures that the function returns a promise,
// and wraps non-promises in it.

await

await 키워드는 자바스크립트가 Promise 가 setteled 되어 값을 리턴할 때 까지 기다리도록 만든다.
await 키워드는 오직 async 함수 안에서만 사용이 가능하다.

async function func1() {
  let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });
    
  let result = await promise1; // promise 가 resolved 될 때까지 기다림
  console.log(result); 
}

func1(); // "done!"

활용 예시

function print(word) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      console.log(word);
      resolve();
    }, 1000)
  })
}

// Promise chaining
print('1')
.then(function() {
  return print('2');
})
.then(function() {
  return print('3');
})

// async await 활용
async function print123() {
  await printFromServerPromise('1')
  await printFromServerPromise('2');
  await printFromServerPromise('3');
}

print123(); // 1 2 3

https://javascript.info/async-await