Promise & async & await

2024. 3. 1. 17:47·Javascript

❓Promise

- 비동기 작업의 최종 완료 또는 실패와 그 결과 값을 나타내는 객체

- Promise의 세 가지 상태:

1. 대기(waiting): 초기 상태, 이행되거나 거부되지 않음.
2. 이행(fulfilled): 연산이 성공적으로 완료됨.
3. 거부(rejected): 연산이 실패함.

- Promise가 한 번 이행or거부되면 그 상태와 결과 값이 영구적으로 고정됨

❓async

- async 키워드를 사용하여 선언된 함수는 항상 Promise를 반환. 만약 async 함수가 값을 반환하면, 이 값은 Promise.resolve()에 의해 감싸져 Promise로 만들어짐. 만약 async 함수가 예외를 던지면, 이 예외는 Promise.reject()에 의해 감싸져 거부된 Promise로 만들어짐

❓await

-  async함수 안에서만 동작

- await 키워드는 Promise의 완료를 기다린 다음, 그 결과를 반환. 만약 Promise가 이행되면, await 표현식은 Promise가 이행될 때 전달된 값을 반환함. 만약 Promise가 거부되면, await 표현식은 예외를 던짐

- await 표현식을 사용하면 비동기 작업을 마치 동기 작업처럼 코드를 작성할 수 있음

But...

await 표현식이 Promise의 완료를 기다리기 때문에, 오래 걸리는 작업에 대해서는 이를 병렬로 처리하는 것이 더 효율적일 수 있음 -> Promise.all()과 같은 함수 사용

async function foo() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise;  // Promise가 이행될 때까지 기다림

  console.log(result);  // "done!"
}

foo();

❓Promise.all()

-  여러 Promise들을 병렬로 처리하는 데 사용. Promise 객체들의 배열을 인자로 받고, 모든 Promise가 이행될 때까지 기다린 후, 각 Promise의 결과값들로 이루어진 배열을 반환하는 새 Promise를 반환

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Promise 1 resolved"), 1000);
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Promise 2 resolved"), 2000);
});

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results);  // ["Promise 1 resolved", "Promise 2 resolved"]
  })
  .catch((error) => {
    console.log(error);
  });

-> Promise.all()을 사용하면 여러 비동기 작업을 병렬로 처리하고, 그 결과를 한 번에 처리할 수 있음!

 

저작자표시 (새창열림)

'Javascript' 카테고리의 다른 글

[Javascript] Array.prototype.sort()  (0) 2025.03.28
Webpack & Babel  (0) 2024.03.01
fetch & axios  (0) 2024.03.01
ES6  (0) 2024.03.01
'Javascript' 카테고리의 다른 글
  • [Javascript] Array.prototype.sort()
  • Webpack & Babel
  • fetch & axios
  • ES6
버그잡는고양이발
버그잡는고양이발
주니어 개발자입니다!
  • 버그잡는고양이발
    지극히평범한개발블로그
    버그잡는고양이발
  • 전체
    오늘
    어제
    • 분류 전체보기 (382)
      • React (16)
      • Next.js (5)
      • Javascript (5)
      • Typescript (4)
      • Node.js (2)
      • Cs (16)
      • 트러블 슈팅 (5)
      • Html (1)
      • Css (3)
      • Django (0)
      • vue (0)
      • Java (2)
      • Python (0)
      • 독서 (1)
      • 기타 (3)
      • 백준 (192)
      • swea (31)
      • 프로그래머스 (30)
      • 이코테 (4)
      • 99클럽 코테 스터디 (30)
      • ssafy (31)
      • IT기사 (1)
  • 블로그 메뉴

    • 홈
    • 태그
  • 인기 글

  • 태그

    99클럽
    항해99
    코딩테스트준비
    Til
    개발자취업
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
버그잡는고양이발
Promise & async & await
상단으로

티스토리툴바