[TIL] JavaSript-동기/비동기, async/await

🌼 async/await

async/await는 Javascript의 비동기를 처리하는 문법의 최신 버전으로 기존 promise/callback 함수 형태 처리방식의 단점을 보완하고 코드의 가독성을 높힐 수 있도록 도와준다.

1)async/await: promise 객체(Javascript 비동기 처리를 위한 객체)에 await를 사용하므로써 fetch가 정상적으로 실행된 결과를 user에 저장한뒤, 이후의 구문을 처리한다.

// async: 예약어
// await: promise 객체를 return 받을때까지 기다리는 역할 then method와 동일하나 callback 함수를 인자로 받지 않는다.
async function logName() {
  var user = await fetch('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

// 실제 예제 (fetchUser, fetchTodo는 API와 호출하여 값을 return 받는 함수)
// user data가 들어오면 if문을 실행하고 todo data가 들어올때까지 기다렸다가 console.log를 출력한다.
async function logTodoTitle() {
  var user = await fetchUser();
  if (user.id === 1) {
    var todo = await fetchTodo();
    console.log(todo.title); // delectus aut autem
  }
}

// async/await 예외처리
async function logTodoTitle() {
  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title);
    }
  } catch (error) {
    console.log(error); // error 발생시, 객체 유형을 확인하여 처리한다.
  }
}

2)Promise.all: single promise 처리가 아닌 2개 이상의 promise를 병렬 처리할 때 사용하는 방법이다.

3)Promise.race: 가장 먼저 호출되는 것을 먼저 실행한다.

//promise.all
async function getApple() {
  await delay(2000);
  return '🍎'
}

async function getBanana() {
  await delay(1000);
  return '🍌';
}

function pickAllFruits() {
  return Promise.all([getApple(), getBanana()])
  .then(fruits => fruits.join(' + '));
}

pickAllFruits().then(console.log);

› 🍎 + 🍌

//promise.race
function pickOnlyOne() {
  return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log);

› 🍌

출처-YOUTUBE(드림코딩), 자바스크립트 async와 await