[ JavaScript ] 비동기 통신 - Promise, async, await

https://www.youtube.com/@dream-coding

유튜버 드림코딩님의 자바스크립트 강의를 듣고 정리한 내용입니다.

---

1. Promise 객체

# Promise 객체 

: 비동기 처리에서 사용되는 객체로, promise가 상태를 관리하여 다른 코드가 비동기적으로 실행될 수 있도록 만드는 객체 

 

# Promise 상태

• 대기 (Pending)
• 이행 (Fulfilled)
• 거부(Reject)

pending / fulfilled / rejected

---

2. Promise 만들기

•  새로운 promise가 만들어질 때, promise 안 excutor 함수가 자동으로 바로 실행된다.
•  비동기 작업 성공 시 resolve가 실행된다.
•  비동기 작업 실패 시 reject가 실행된다.

      

      

      

    
    

      <javascript />
    
const promise = new Promise(function (resolve, reject) {
  console.log("doing something ..."); // 무조건 실행

  setTimeout(() => {
    resolve("Hello!"); // 비동기 작업 성공 시

    reject(new Error("no network!")); // 비동기 작업 실패 시
  }, 1000);
});

---

3. Promise 사용하기 

•  정상적인 값을 넘기면 then()이 호출된다.
•  비정상적인 값 (error 등)을 넘기면 catch() 가 호출된다.
•  성공 / 실패 여부와 상관없이 마지막에 무조건 finally()가 호출된다.  

      

      

      

    
    

      <javascript />
    
promise
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("finally");
  });

---

4. Promise 연결하기

• 처음 값이 1에 2를 곱하면 2이고, 2에 3을 곱하면 6이고, 1을 빼면 5이다.
• then()은 값을 바로 전달할 수도 있고, promise 객체를 전달할 수도 있다.

      

      

      

    
    

      <javascript />
    
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));  // 5 출력

---

5. Promise 오류 처리하기

• getHen() 함수에서 성공 시 닭 이모티콘🐔을 리턴
• getEgg() 함수에서 성공 시 달걀 이모티콘 🥚을 리턴
• cook() 함수에서 성공 시 달걀후라이 이모티콘 🍳을 리턴한다고 했을 때, 
• then()으로 세 함수를 모두 호출하면 🐔=>🥚=>🍳 이 정상적으로 출력됨

      

      

      

    
    

      <javascript />
    
const getHen = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("🐔"), 1000);
  });
};

const getEgg = (hen) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${hen}=>🥚`), 1000);
  });
};

const cook = (egg) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg}=>🍳`), 1000);
  });
};

getHen() //
  .then(getEgg)
  .then(cook)
  .then(console.log); // 🐔=>🥚=>🍳 출력

• getEgg() 함수에서 resolve() 함수 대신에 reject() 함수로 에러 메시지를 전달
• catch() 함수로 error 발생 시 수박 이모티콘 🍉을 대신 리턴하면
• 닭 이모티콘과 달걀 이모티콘은 출력되지 않고, 수박 이모티콘과 계란후라이 이모티콘만 출력됨 (🍉=>🍳)

      

      

      

    
    

      <javascript />
    
const getEgg = (hen) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`error ${hen}=>🥚`)), 1000);
  });
};

      

      

      

    
    

      <javascript />
    
getHen() //
  .then(getEgg)
  .catch((error) => {
    return "🍉";
  })
  .then(cook)
  .then(console.log)
  .catch(console.log);

---

6. async 

• 일반 함수 앞에 async 키워드를 붙여서 비동기 함수로 만들어준다.
• promise를 사용하여 결과를 반환한다. ( => promise 객체 선언할 필요 없어짐 )

      

      

      

    
    

      <javascript />
    
const fetchUser = () => {
  return new Promise((resolve, reject) => {
    resolve("choi");
  });
};

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

      

      

      

    
    

      <javascript />
    
const fetchUser = async () => {
  return "choi";
};

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

---

7. await 

• async로 선언한 함수 안에서만 사용 가능 
• 비동기 코드를 조회할 수 있게 해주는 함수 
• getApple 과 getBanana 모두 기다려야하므로 4초가 걸림 

      

      

      

    
    

      <javascript />
    
const delay = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

const getApple = async () => {
  await delay(2000);
  return "🍎";
};

const getBanana = async () => {
  await delay(2000);
  return "🍌";
};

const pickFruits = async () => {
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple}+${banana}`;
};

pickFruits().then(console.log);

---

8. await 병렬 처리

• getApple 함수와 getBanana 함수를 각각 promise 객체로 정의하고, await로 호출하게 되면, promise 객체가 만들어지자마자 함수 안 코드가 실행되게 되므로 동시에 대기를 시작하여 2초만 걸림 
• 하지만 코드가 길고 지저분하므로 API 를 활용함 (Promise.all)

      

      

      

    
    

      <javascript />
    
const pickFruits = async () => {
  const applePromise = getApple();
  const bananaPromise = getBanana();
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple}+${banana}`;
};

---

9. Promise.all

• promise 객체들의 배열을 인자로 받는다.
• 전달받은 promise들을 병렬처리하고 그 결과를 resolve하는 새로운 promise를 리턴한다.
• 하나의 promise라도 reject 되면 즉시 reject한다.

      

      

      

    
    

      <javascript />
    
const picklAllFruits = () => {
  return Promise.all([getApple(), getBanana()]).then((fruits) =>
    fruits.join("+")
  );
};

picklAllFruits().then(console.log);

---

10. Promise.race

• 가장 빨리 응답을 한 결과값만 resolve해서 then으로 넘어감 

      

      

      

    
    

      <javascript />
    
const pickOnlyOne = () => {
  return Promise.race([getApple(), getBanana()]);
};

pickOnlyOne().then(console.log);