비동기 call-back, promise, async

콜백지옥

class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      if (
        (id === "ellie" && password === "dream") ||
        (id === "coder" && password === "academy")
      ) {
        onSuccess(id);
      } else {
        onError(new Error("not found"));
      }
    }, 2000);
  }

  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user === "ellie") {
        onSuccess({ name: "ellie", role: "admin" });
      } else {
        onError(new Error("no access"));
      }
    }, 1000);
  }
}

const userStorage = new UserStorage();
const id = prompt("enter your id");
const password = prompt("enter your password");
userStorage.loginUser(
  id,
  password,
  (user) => {
    userStorage.getRoles(
      user,
      (userWithRole) => {
        alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role}`);
      },
      (error) => {
        console.log(error);
      }
    );
  },
  (error) => {
    console.log(error);
  }
);

 

Promise 기본

// Promise is a JavaScript object for asynchronous operation
// state: pending -> fulfilled or rejected
// Producer vs Cunsumer

// 1. Producer
// class 이기 때문에 new 키워드 이용하여 obj 생성
// when new Promise is created, the executor runs automatically.
const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log("doing something...");
  setTimeout(() => {
    //resolve("ellie");
    reject(new Error("no network"));
  }, 2000);
});

// 2. Consumers: then, catch, finally
// value = promise 가 정상적으로 수행되어(then) 전달된 'ellie'
promise
  .then((value) => {
    console.log(value); // ellie 출력
  })
  // then 호출 > promise 리턴 > 리턴된 promise에 catch를 등록
  .catch((error) => {
    console.log(error); // Error: no network
  })
  // 성공실패 상관없이 무조건 마지막에 호출
  .finally(() => {
    console.log("finally");
  });

// 3. Promise chaining
const fetchNumber = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
});

fetchNumber
  .then((num) => num * 2)
  .then((num) => num * 3)
  .then((num) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(num - 1), 1000);
    });
  })
  .then((num) => console.log(num));

// 4. Error Handling
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve("❤"), 1000);
  });
const getEgg = (hen) =>
  new Promise((resolve, reject) => {
    //setTimeout(() => resolve(`${hen} => ❌`), 1000);
    setTimeout(() => reject(new Error(`error! ${hen} => ❌`)), 1000);
  });
const cook = (egg) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => 🎁`), 1000);
  });

getHen()
  // 받아오는 value 를 다른 함수 하나로 바로 호출하는 경우 생략 가능
  //  .then((hen) => getEgg(hen))
  //  .then((egg) => cook(egg))
  //  .then((meal) => console.log(meal));
  .then(getEgg)
  .catch((error) => {
    return "🚀"; // 🚀 => 🎁
  })
  .then(cook)
  .then(console.log) // ❤ => ❌ => 🎁
  .catch(console.log); // Error: error! ❤ => ❌

 

callback to promise

class UserStorage {
  loginUser(id, password) {
    return new Promise((resolve, reject) => {
      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);
    });
  }
}

const userStorage = new UserStorage();
const id = prompt("enter your id");
const password = prompt("enter your password");
userStorage
  .loginUser(id, password)
  // .then(user => userStorage.getRoles())
  .then(userStorage.getRoles)
  .then((user) => alert(`Hello ${user.name}, you have a ${user.role}`))
  .catch(console.log);

 

async & await

// async & await
// clear style of using promise :)

// 1. async
function fetchUser() {
  return new Promise((resolve, reject) => {
    resolve("ellie");
  });
}

async function fetchUser() {
  return "ellie";
}

const user = fetchUser();
user.then(console.log);
console.log(user);

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

async function getApple() {
  await delay(2000);
  //  throw "error";
  return "🍎";
}

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

async function pickFruits() {
  const applePromise = getApple(); // promise를 만들자마자 getXXX 함수 실행
  const bananaPromise = getBanana();
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple} + ${banana}`; // 1000ms만에 🍎 + 🍌 출력 / >> 3번으로 Go
}

// error 처리, throw + try, catch

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

// promise 이용 코드

//function getBanana() {
//  return delay(3000)
//  .then(() => '🍌');
//}

//function pickFruits() {
//  return getApple().then((apple) => {
//    return getBanana().then((banana) => `${apple} + ${banana}`);
//  });
//}
//
pickFruits().then(console.log); // 🍎 + 🍌

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

pickAllFruits().then(console.log); // 1000ms만에 🍎 + 🍌 출력

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

pickOnlyOne().then(console.log);