14.비동기의 꽃 JavaScript async 와 await

1. async & await

• promise를 조금 간편하게 사용할수 있다.

• promise를 깨끗한 스타일로 사용할수 있게한다.

• 단, 무조건 promise를 대처하지는 않는다, 경우에 따라 promise를 사용하는것이 좋을때가 있고, async 와 await를 사용하는것이 좋을때가 잇다.

2. async

• Promise

function fetchUser() {
  //do network request in 10 secs....

  return new Promise((resolve, reject) => {
    resolve("ellie");
  });
}

const user = fetchUser();
console.log(user); // Promise {<resolved>: "ellie"}
user.then(console.log);

• async : async를 키워드를 사용하면, 앞에서 배웠던 promise를 감싸고 있는 형태를 간편하게 사용할수 있게 된다.

async function fetchUser() {
  //do network request in 10 secs....
  return "ellie";
}

const user = fetchUser();
console.log(user); // Promise {<resolved>: "ellie"}
user.then(console.log);

3. await

• await는 async 함수 안에다만 쓸수 있다.

• await 적용전

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

function getApple() {
  return delay(1000).then(() => "사과");
}

function getBanana() {
  return delay(1000).then(() => "바나나");
}

function pickFruits() {
  return getApple().then((apple) => {
    return getBanana().then((banana) => `${apple} + ${banana}`);
  });
}

pickFruits().then(console.log);

• await 적용 : chaining 되어서 복잡해지는 것을 방지해줌

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);

3.2 await 병렬처리

• await의 문제점 : 순차적으로 진행되기 때문에 사과를 받는데 1초가 걸리고, 바나나를 받는데 1초가 걸린다.

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

async function getBanana() {
  await delay(1000);
  return "바나나";
}
async function pickFruits() {
  const apple = await getApple(); //"사과가" return 될떄까지 1초가 걸림
  const banana = await getBanana(); // "바나나"가 return 될때까지 1초가 걸림
  return `${apple}+${banana}`;
}

• await의 병렬 처리(병렬처리의 나쁜예)

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

async function getBanana() {
  await delay(1000);
  return "바나나";
}
async function pickFruits() {
  const applePromise = getApple(); //pickFruits가 asyn 되어있으므로 promise 형태니까 getApple() 이 바로 시작
  const bananaPromise = getBanana(); //pickFruits가 asyn 되어있으므로 promise 형태니까 getBanan()가 바로 시작
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple}+${banana}`;
}

• Promise APIs를 이용한 병렬처리(all)

• Promise.all : Promise의 배열을 전달하게 되면 모든 Promise들이 병렬적으로 다 받을때까지 모아준다.

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

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

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

function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then((fruits) =>
    fruits.join("+")
  );
  // fruits에 getApple에서 받은것과 getBanana에서 받은것을 모아준다.
}

pickAllFruits().then(console.log);

• Promise APIs를 이용한 병렬처리(race)

• Promise.race : 배열에 전달된 Promise중에서 가장 먼저 return되는 것만 출력해준다.

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

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

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

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

pickOnlyOne().then(console.log);