🚩 promise

promise

📝 설명

• 콜백(callback) 중첩을 해결하기 위해 사용
• 가독성을 높이고 에러 처리를 쉽게 함
• 비동기적으로 수행하는 작업의 결과를 알려줌

✒️ 코드 작성

입력

예제1

js

const myPromise = new Promise((resolve, reject) => {
  // 함수 파라미터로 받아옴 - resolve(성공), reject(실패)

  setTimeout(() => {
    // resolve(111); // 1초 뒤에 성공하는 promise
    reject(new Error()); // 1초 뒤에 에러 발생
  }, 1000);
});

// promise가 끝나고 할 작업 설정
myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

예제2

js

function runDelay(seconds) {
  // 콜백함수를 전달받지 않음
  return new Promise((resolve, reject) => {
    // (성공, 실패) // 여기서 콜백을 전달받음
    // 실행구
    if (!seconds || seconds < 0) {
      // 시간이 넘어오지 않았거나 0보다 작았을 때
      reject(new Error("시간은 0보다 커야 함")); // 에러 발생. 처리해주는 곳은 아직 없음
    }
    setTimeout(resolve, seconds * 1000);
  });
}

runDelay(2)
  // 필요한 일을 수행. 성공
  .then(() => {
    console.log("타이머 완료");
  })

  // 에러처리. 실패
  // .catch((error) => { console.error(error); });
  .catch(console.error) // 전달된 인자와 호출할 인자가 같을 땐 생략 가능

  // 최종. 무조건 호출
  .finally(() => {
    console.log("끝");
  });

/*
function runDelay(callback, seconds) {
  // 인자 값 2개
  if (!callback) {
    throw new Error("callback 함수를 전달받아야 합니다");
  }
  if (!seconds || seconds < 0) {
    // 시간이 넘어오지 않았거나 0보다 작았을 때
    throw new Error("시간은 0보다 커야 함");
  }
  setTimeout(callback, seconds * 1000);
}


// try catch : 에러 발생 시 프로그램이 강제종료(app crashed) 되지 않고 작동 되도록 함(비동기에서는 거의 사용함)
try {
  runDelay(() => {
    console.log("타이머 완료");
  }, -2);
} catch {
  console.log("프로그램 에러");
}
*/

출력

• 이미지로 대체

2초 후 실행

🔗 참고 링크 & 도움이 되는 링크

• javascript Promise MDN

promise 응용

✒️ 코드 작성

입력

js

function fetchEgg(chicken) {
  // return new Promise((resolve, reject) => {});
  return Promise.resolve(`${chicken}  -> 🥚`);
}

function friedEgg(egg) {
  return Promise.resolve(`${egg} -> 🍳`);
}

function getChicken() {
  // return Promise.resolve(`🌿 -> 🐔`);
  return Promise.reject(new Error("치킨을 가지고 올 수 없음"));
}

getChicken() // 🌿 -> 🐔
  // catch 맨 처음에 작성 가능
  // .catch((error) => {
  //   console.log(error.name)
  //   return "🐔" // 에러는 나지만 undefined에 추가됨
  // }) 
  .catch(() => "🐔") // 대체값을 넣어줘서 에러가 나도 정상적으로 작동하도록 함.
  .then((chicken) => { return fetchEgg(chicken) }) // 🌿 -> 🐔  -> 🥚
  .then((egg) => friedEgg(egg)) // 🌿 -> 🐔  -> 🥚 -> 🍳
  .then(console.log)
  // .catch((error)=>console.log(error.name))
  
  // 위와 같은 코드
  // .then(fetchEgg)
  // .then(friedEgg)
  // .then(console.log)

/*
fetchEgg("🐔").then((egg) => {
  console.log("받아온 것은? : ", egg); // 인자값은 fetchEgg함수의 리턴 
  // .then(console.log(egg)); // 받아온 인자와 호출한 인자가 같을 시 생략 가능
});
*/

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript Promise MDN

---

promise method

✒️ 코드 작성

입력

js

function getBanana() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("🍌");
    }, 3000);
  });
}

function getApple() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("🍎");
    }, 2000);
  });
}

function getKiwi() {
  return Promise.reject(new Error("키위는 없어요 ㅠㅠ"));
}

// 바나나와 사과를 함께 가지고 와서 배열로 만듦
getBanana() // 호출
  // banana에서 받아 온 내용을 apple에 전달 -> 전달받은 apple을 배열로 만듦 (과정이 내부에서 이루어짐)
  .then((banana) =>
    getApple().then((apple) => {
      return [banana, apple]; // 한 줄이라 return 생략 가능
    })
  )
  .then(console.log); // 바나나 3초 + 사과 1초 = 4초 후 출력

// 한번에 모든 promise들을 실행(병렬적으로)
Promise.all([getBanana(), getApple()]).then((fruits) =>
  console.log("all - ", fruits)
); // 총 3초

Promise.all([getBanana(), getApple(), getKiwi()])
  .then((fruits) => console.log("all error - ", fruits)) // 출력❌
  .catch(console.log); // 에러 있는 함수 처리

// promise들 중에 제일 빨리 수행된 코드만 실행
Promise.race([getBanana(), getApple()])
  .then((fruits) => console.log("race - ", fruits)) // 사과만 보임
  .catch((error) => {
    console.log(error);
  });

// 모든 결과에 대해 알아보고 싶을 때
Promise.allSettled([getBanana(), getApple(), getKiwi()])
  .then((fruits) => console.log("allSettled - ", fruits)) // 모든 결과에 대해 출력
  .catch(console.log); // 따로 출력❌

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript Promise MDN

---