[JS] async, await, Promise APIs

Async

- promise를 chaining을 하는 것을 async,await로 간편하게 해결할 수 있다.

- syntatic sugar : 기존의 존재하는 promise위에 간편하게 할 수 있도록 API를 제공하는 것

- 비동기적인 것을 동기적으로 보이게끔 해준다.

'use strict';
// async & await
// clear style of using promise :)

// 1. async
async function fetchUser() {
  // do network reqeust in 10 secs....
  return 'ellie';
}

const user = fetchUser();
user.then(console.log); //promise로 만들어짐
console.log(user);

 

Await

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

async function getApple() {
  await delay(2000);
  return '🍎';
}

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

//병렬로 실행 가능 한것 --> 서로 연관되어 있지 않은 함수들
async function pickFruits() {
  const applePromise = getApple(); //promise를 만들면 바로 promise가 실행된다.
  const bananaPromise = getBanana(); //promise를 만들면 바로 promise가 실행된다.
  const apple = await applePromise; //동기화 시켜주기
  const banana = await bananaPromise; //동기화 시켜주기
  return `${apple} + ${banana}`; 
}

pickFruits().then(console.log); //사과 + 바나나  -->  병렬로 실행

 

Useful APIs

- Promise.all : promise배열을 전달하면 모든 promise들이 병렬적으로 다 받을 때 까지 모아주는 애들 

위에서의 코드들을 간단하게 만들어줌

// 3. useful APIs ✨
function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log);

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

pickOnlyOne().then(console.log);

 

[callback-to-promise]

'use strict';

// Callback Hell example
class UserStorage {
  loginUser(id, password) {
    return new Promise((resolve, reject) => {   //Promise 리턴
      setTimeout(() => {
        if (
          (id === 'ellie' && password === 'dream') ||
          (id === 'coder' && password === 'academy')
        ) {
          resolve(id);   //성공
        } else {
          reject(new Error('not found'));  //에러
        }
      }, 2000);
    });
  }

  getRoles(user) {
    return new Promise((resolve, reject) => { //프로미스 생성
      setTimeout(() => {
        if (user === 'ellie') {
          resolve({ name: 'ellie', role: 'admin' });   //성공
        } else { 
          reject(new Error('no access')); //실패
        }
      }, 1000);
    });
  }

  // Homework Answer 🚀
  async getUserWithRole(user, password) {
    const id = await this.loginUser(user, password);
    const role = await this.getRoles(id);
    return role;
  }
}

// Original code from Youtube course
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your passrod');
userStorage
  .loginUser(id, password)
  .then(userStorage.getRoles)  //함수 호출
  .then(user => alert(`Hello ${user.name}, you have a ${user.role} role`))  //잘받아온다면 
  .catch(console.log);  

// Homework Answer 🚀
userStorage
  .getUserWithRole(id, password) 
  .catch(console.log)
  .then(console.log);

 

---

Thanks for 드림코딩

https://youtu.be/aoQSOZfz3vQ