async-await

async 란

promise를 더 깔끔하게 제작하기 위해 존재한다

 

// 1. async
// 따로 promise object로 선언하지 않아도 promise 형태로 출력됨
async function fetchUser() {

  return 'ellie';
}
const user = fetchUser()
user.then(console.log(user))

 

await란

비동기 동작하는 promise object를 동기처럼 보이게 하여, 순서를 만들어줌

//2. await
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
  await delay(1000);
  return '사과'
}

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

async function pickFruits() {
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple} + ${banana}`
}

pickFruits()
  .then(console.log)

---

위와 같이 제작하게 된다면, apple과 banana를 가져오는데 1 + 1 총 2초가 걸리게 된다.
서로 상관 없는 함수이므로 pickFruits 함수 내에선 순서가 필요하지 않고, 비동기적으로 작업이 필요한데, 이를 병렬로 처리하기 위한 2가지 방법이 있다.

 

1. 함수 내부에서 promise를 만드는 방법

async function pickFruits() {
  // apple을 받아오는데 1초, banana를 받아오는데 1초가 걸리는데, 이를 병렬로 처리하지 못하면 2초가 걸림
  // 병렬처리 하기 위한 방법
  // 1. 내부에서 promise를 만듬
  // promise는 생성과 동시에 진행되기 때문에 내부에서 promise를 생성하여 동기처리 해줌
  const applePromise = getApple();
  const bananaPromise = getBanana();
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple} + ${banana}`
}
pickFruits()
  .then(console.log)

2. Promise.all 이란 제공되는 api를 이용

async function pickAllFruits() {
  // 2. Promise에서 제공하는 api를 이용
  // promise 배열을 전달하게 되면 모든 promise들이 병렬적으로 다 받아질 때까지 모아주는 작업을 함
  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)