네트워크 요청, 파일 읽기 및 타이머는 모두 나중에 완료되지만 JavaScript는 단순히 중지하고 기다릴 수 없으며 그렇지 않으면 페이지가 정지됩니다. JavaScript 약속은 “이 작업이 끝나면 저 작업을 수행하고, 실패하면 대신 이 작업을 수행”이라고 말할 수 있는 깔끔한 방법을 제공합니다.

async과 await를 주로 작성하더라도 밑에는 Promise를 사용하고 있으므로 이를 이해하면 디버깅이 훨씬 쉬워집니다. Node.js 24에서 이러한 예제를 실행했으며 표시된 출력은 해당 실행에서 나온 것입니다. 최신 브라우저에서도 동일한 방식으로 작동합니다.

약속이란 무엇입니까?

약속은 미래 가치에 대한 자리 표시자입니다. 레스토랑에서 주문할 때 건네주는 부저를 생각해 보세요. 아직 음식은 없지만, 음식이 언제 준비되었는지, 문제가 있는지 알려주는 무언가를 들고 있는 동안 자유롭게 다른 일을 할 수 있습니다.

코드에서 비동기 함수는 즉시 Promise를 반환하고 다음에 일어날 일을 첨부합니다.

fetch("/api/user")
  .then((response) => response.json())
  .then((user) => console.log(user.name))
  .catch((error) => console.log("Failed:", error.message));

세 가지 약속 상태

이행되거나 거부된 Promise를 settled라고 합니다. 약속은 단 한 번만 이루어질 수 있습니다. 그 이후에는 해당 상태와 값이 고정되고 이후의 resolve 또는 reject 호출은 무시됩니다.

약속 만들기

일반적으로 fetch과 같은 API에서 Promise를 사용하지만 Promise를 생성하면 작동 방식을 볼 수 있습니다. 생성자는 두 개의 함수 resolve와 reject을 받습니다.

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: "Asha" });
      } else {
        reject(new Error("Invalid id"));
      }
    }, 100);
  });
}

console.log(fetchUser(1));

// Promise { <pending> }

Promise를 즉시 기록하면 타이머가 실행되지 않았기 때문에 아직 보류 중임을 알 수 있습니다. 값은 핸들러 또는 await을 통해서만 도달할 수 있습니다. 항상 문자열보다는 Error 객체로 거부하세요. Error은 디버깅에 도움이 되는 스택 추적을 전달하기 때문입니다.

그럼 잡아서 마지막으로

이 세 가지 메서드는 Promise에 핸들러를 연결합니다.

fetchUser(1).then((user) => console.log(user.name));
// Asha

fetchUser(-1)
  .then((user) => console.log("never runs", user))
  .catch((error) => console.log("caught:", error.message))
  .finally(() => console.log("finally"));

// caught: Invalid id
// finally

then은 성공 시 실행되고, catch는 실패 시 실행되며, finally은 어느 쪽이든 실행됩니다. 따라서 finally는 로딩 스피너를 숨기는 등의 정리 작업에 적합한 장소입니다. 결과에 신경쓰지 않아야 하므로 인수를 받지 않습니다.

약속을 연결하기

핵심 아이디어는 then이 항상 새로운 약속을 반환한다는 것입니다. 핸들러가 반환하는 모든 것이 새로운 Promise의 값이 됩니다.

Promise.resolve(2)
  .then((n) => n * 10)
  .then((n) => n + 1)
  .then((n) => console.log("chain:", n));

// chain: 21

핸들러가 또 다른 Promise를 반환하면 체인은 계속 진행하기 전에 약속이 확정될 때까지 기다립니다. 이것이 중첩된 콜백을 단순한 단계 순서로 바꾸는 것입니다.

getUser(id)
  .then((user) => getOrders(user.id))
  .then((orders) => getInvoice(orders[0].id))
  .then((invoice) => console.log(invoice.total))
  .catch(handleError);

오류가 체인을 통해 이동하는 방법

거부된 Promise는 catch에 도달할 때까지 then마다 건너뜁니다. 핸들러 내부에 던지는 것도 거부로 간주됩니다. 그리고 일반적으로 반환되는 catch은 체인을 다시 정상으로 되돌립니다.

Promise.resolve("start")
  .then(() => {
    throw new Error("step 2 failed");
  })
  .then(() => console.log("skipped"))
  .catch((error) => {
    console.log("caught:", error.message);
    return "recovered";
  })
  .then((value) => console.log("continues:", value));

// caught: step 2 failed
// continues: recovered

이것을 try과 catch의 비동기 버전으로 생각하십시오. 끝에 있는 하나 catch는 일반적으로 전체 체인을 덮습니다. 오류만 기록하고 싶지만 여전히 실패하는 경우 catch 내부에서 다시 발생시킵니다.

Promise.all, allSettled, race 및 any

이러한 정적 메서드는 여러 Promise를 동시에 조정합니다. 그들 모두는 배열을 취하고 하나의 약속을 반환합니다.

이를 테스트하기 위해 우리는 두 개의 작은 도우미를 사용했습니다. 하나는 지연 후 성공하고 다른 하나는 지연 후 실패합니다.

const wait = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));
const fail = (ms, message) =>
  new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms));

Promise.all

await Promise.all([wait(300, "a"), wait(100, "b"), wait(200, "c")]);

// [ 'a', 'b', 'c' ]   took about 300 ms

주목해야 할 두 가지 세부 사항. b이 먼저 완료되었더라도 결과는 입력 순서를 유지합니다. 그리고 총 시간은 약 300ms였습니다. 이는 가장 느린 작업의 시간이지 합계 600ms가 아닙니다. 세 가지 모두 이미 동시에 실행 중이었기 때문입니다. 그 중 하나라도 거부하면 전체가 즉시 거부됩니다.

await Promise.all([wait(100, "a"), fail(50, "b failed")]);

// rejected: b failed

Promise.allSettled

이는 모든 것을 기다리고 각 결과를 보고하므로 하나의 실패가 나머지를 잃지 않습니다. 이는 각 위젯이 독립적으로 로드되는 대시보드에 적합합니다.

const results = await Promise.allSettled([wait(50, "a"), fail(50, "b failed")]);
results.map((r) => r.status);

// [ 'fulfilled', 'rejected' ]

Promise.race 및 Promise.any

await Promise.race([wait(300, "slow"), wait(100, "fast")]);   // fast
await Promise.any([fail(50, "x"), wait(100, "ok")]);          // ok

차이점은 race은 실패하더라도 먼저 해결하는 반면, any는 성공하는 한 실패를 무시한다는 것입니다. race의 일반적인 용도는 느린 요청에 시간 초과를 추가하는 것입니다. 하지만 느린 작업은 취소하지 않는 한 백그라운드에서 계속 실행됩니다.

약속과 비동기/대기

async과 await는 동일한 Promise를 사용하는 더 읽기 쉬운 방법입니다. async 함수는 항상 Promise를 반환하고, await는 Promise가 확정될 때까지 해당 함수를 일시 중지합니다.

async function showInvoice(id) {
  try {
    const user = await getUser(id);
    const orders = await getOrders(user.id);
    console.log(orders.length);
  } catch (error) {
    console.log("Failed:", error.message);
  }
}

거부하면 오류가 발생하므로 일반적인 try과 catch가 작동합니다. 병렬 작업을 위해서는 여전히 Promise.all이 필요합니다. 호출을 하나씩 기다리면 호출이 순서대로 실행되기 때문입니다. 우리의 JavaScript 비동기/대기 가이드는 이에 대해 더 자세히 설명합니다.

약속과 이벤트 루프

Promise 핸들러는 Promise가 이미 확정된 경우에도 즉시 호출되지 않습니다. 현재 코드가 완료된 후 타이머가 시작되기 전에 실행됩니다. 증거는 다음과 같습니다.

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("microtask"));
console.log("sync");

// sync
// microtask
// timeout

동기 코드가 먼저 실행됩니다. 다음은마이크로태스크 대기열, 약속 핸들러를 보유합니다. 그래야만 이벤트 루프가 다음 항목을 선택합니다.작업, 타이머와 같은. 이것은 인기 있는 면접 질문이며, 왜setTimeout0은 실제로 즉각적이지 않습니다.

약속과 콜백

일반적인 실수

• then 내부로 돌아가는 것을 잊었습니다. return이 없으면 다음 단계는 undefined를 받고 내부 약속을 기다리지 않습니다.
• 아니요 catch 전혀. 이로 인해 처리되지 않은 거부가 발생하고 Node.js에서는 기본적으로 프로세스가 중지됩니다.
• 체인 대신 중첩. then 안에 then를 넣으면 콜백 지옥이 재현됩니다. 약속을 반환하고 체인을 계속하십시오.
• new Promise에서 Promise 래핑. 함수가 이미 Promise를 반환하는 경우 그냥 사용하세요.
• 비동기 콜백과 함께 forEach를 사용합니다. 기다리지 않습니다. JavaScript 배열 방법 가이드에 표시된 대로 map와 함께 for...of 또는 Promise.all를 사용하세요.
• 약속이 취소될 수 있다고 생각합니다. 약속 자체는 취소될 수 없습니다. 요청의 경우 AbortController를 사용하세요.

마무리

Promise는 몇 가지 규칙으로 귀결됩니다. Promise는 한 번 확정되고, then 새로운 Promise를 반환하며, 오류는 무언가가 이를 포착할 때까지 체인을 따라 이동합니다. 이러한 규칙이 자연스러워지면 async와 await은 더 이상 마술이 아닙니다. 연습하려면 Promise를 사용하여 하나의 콜백 기반 함수를 다시 작성한 다음 Promise.all를 사용하여 두 개의 엔드포인트를 가져오고 실패를 적절하게 처리합니다.

자주 묻는 질문

계속 학습하세요