[JS] Promise와 async/ await

요새 API를 다루면서 Promise를 사용하려고 보니, 그새 까먹어서 다시 정리하기😅

Promise

Promise is a javascript object for asynchronous operation. (network, read files...)

• State: pending - fulfilled - rejected

Producer

• 서버와 통신 할 경우 = fetch
• resolve / reject
  When new promise is created, the executor runs automatically.

const promise = new Promise((resolve, reject) => {
	console.log('Doing somtghing ...');
  	setTimeout(() => {
      resolve('Suyeon');
      reject(new Error('No network'));
    }, 200)
})

Consumer

• .then()은 resolve의 값 혹은 promise를 전달할 수 있다.
• Promise chaining

promise
.then(res => console.log(res))
.catch(err => console.log(err))
.finally(() => console.log('finally!'))

Error Handling

• Promise의 인자와 콜백함수의 인자가 같다면 인자는 생략가능하다.
• Promise chain의 흐름을 잘 유지하며 error handling을 하고 싶다면, 각각의 then()에 catch()를 사용하여 대안을 제공한다.

const first = () => new Promise((resolve, reject) => {
    setTimeout(() => resolve('First'), 1000);
});

const second = (first) => new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`Error: ${first} -> second`)), 1000);
});

const third = (second) => new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${second} -> Third`), 1000);
});

first()
.then(second)
.catch(err => 'Alternative') // (*)
.then(third)
.then(console.log)
.catch(console.log)

// .then(res => second(res))

---

Async / await

Async/await은 promise를 더욱 간결하게 사용할수 있는 Syntatic sugar이다.

• try...catch

Async 키워드를 사용하면 자동으로 promise를 반환한다.

async function fetchUser() {
  return 'Suyeon' // (*)
}

function fethUser() {
  return new Promise((resolve) => resolve('Suyeon'))  // (*)
}

간결한 syntax

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

async function getApple() {
  await delay(200);
  throw 'error' // (*) 
  return 'apple'
}

function getBanana() {
  return delay(200)
  .then(() => 'Banana');
}

Error Handling(try...catch)

async function pickFruits() {
  try {
    const apple = await getApple(); // 1s
    const banana = await getBanana(); // 1s
    return `${apple} + ${banana}` // 2s
  } catch(error) {
    console.log(error);
  }
}

💫 병렬적으로 데이터 가져오기

1️⃣ Promise.all (서로 독립적인 경우)

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

pickFruits.then(console.log);

2️⃣ Promise.race
가장 먼저 값을 리턴하는 데이터를 가져옴

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

pickOnlyOne.then(console.log);