[콜럼Vue스] promise

**Promise**는 자바스크립트에서 비동기 작업을 처리하기 위해 사용되는 객체로, 비동기 작업의 성공(fulfilled) 또는 **실패(rejected)**를 처리할 수 있게 해줌. Promise는 ES6에서 도입되었으며, 비동기 코드를 더 체계적이고 가독성 좋게 작성할 수 있게 도와줌. 주로 네트워크 요청이나 타이머 함수 등에서 사용됨.

1. Promise 기본 개념

Promise는 비동기 작업의 결과를 처리하는 세 가지 상태를 가짐:

• 대기(pending): Promise가 아직 완료되지 않은 상태.
• 이행(fulfilled): Promise가 성공적으로 완료된 상태. 비동기 작업이 완료되고 성공 결과를 반환함.
• 거부(rejected): Promise가 실패한 상태. 비동기 작업에서 오류나 실패가 발생했을 때 해당 상태로 변경됨.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업
  if (/* 성공 조건 */) {
    resolve("작업 성공"); // 작업 성공 시 resolve 호출
  } else {
    reject("작업 실패"); // 작업 실패 시 reject 호출
  }
});

 

• resolve: 비동기 작업이 성공했을 때 호출하며, 결과를 전달함.
• reject: 비동기 작업이 실패했을 때 호출하며, 오류 메시지를 전달함.

2. Promise 사용법

Promise는 .then(), .catch(), .finally() 메서드를 사용해 결과를 처리함.

const myPromise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("작업 성공"); // 성공 시 resolve 호출
  } else {
    reject("작업 실패"); // 실패 시 reject 호출
  }
});

myPromise
  .then((result) => {
    console.log(result); // 성공 시: "작업 성공"
  })
  .catch((error) => {
    console.error(error); // 실패 시: "작업 실패"
  })
  .finally(() => {
    console.log("작업 완료");
  });

 

 

• then(): Promise가 이행(fulfilled) 상태일 때 호출되며, 결과값을 처리함.
• catch(): Promise가 거부(rejected) 상태일 때 호출되며, 오류를 처리함.
• finally(): 성공 여부와 상관없이 Promise가 완료되면 항상 실행됨.

3. 비동기 작업 처리

Promise는 시간이 오래 걸리는 작업을 처리하는 데 유용함. 예를 들어, 서버에 데이터를 요청하거나 파일을 읽는 등의 작업은 비동기적으로 처리해야 함.

(타이머함수)

const wait = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`Waited for ${ms} milliseconds`);
    }, ms);
  });
};

wait(2000).then((message) => {
  console.log(message); // 2초 후 "Waited for 2000 milliseconds" 출력
});

 

 

• 이 예시는 **setTimeout**을 사용하여 2초 후에 Promise가 완료되도록 하고, 결과를 출력하는 예시임.
• 비동기 작업이 완료될 때까지 기다린 후, then()을 사용해 결과를 처리함.

4. Promise 체이닝 (Chaining)

여러 개의 비동기 작업이 있을 때, 연속적으로 처리하기 위해 Promise 체이닝을 사용할 수 있음. 각각의 then()은 다음 비동기 작업을 처리한 후, 다음 then()으로 전달됨.

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched"), 1000);
  });
};

const processData = (data) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`${data} processed`), 1000);
  });
};

fetchData()
  .then((data) => {
    console.log(data); // "Data fetched"
    return processData(data);
  })
  .then((processedData) => {
    console.log(processedData); // "Data fetched processed"
  })
  .catch((error) => {
    console.error("Error:", error);
  });

 

 

• **fetchData()**가 완료되면 **processData()**를 호출하여 다음 작업을 처리함.
• 이처럼 Promise 체이닝을 사용하면 복잡한 비동기 작업을 순차적으로 처리할 수 있음.

5. Promise 병렬 처리

여러 개의 비동기 작업을 병렬로 실행하고, 모든 작업이 완료되었을 때 결과를 처리할 수 있음. 이를 위해 **Promise.all()**과 **Promise.race()**를 사용할 수 있음.

(1) Promise.all()

• 여러 개의 Promise를 병렬로 실행하고, 모든 Promise가 완료될 때까지 기다린 후 결과를 반환함.
• 하나라도 실패하면 전체가 실패로 처리됨.

const promise1 = Promise.resolve("첫 번째 작업 완료");
const promise2 = new Promise((resolve) => setTimeout(() => resolve("두 번째 작업 완료"), 2000));

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // ["첫 번째 작업 완료", "두 번째 작업 완료"]
  })
  .catch((error) => {
    console.error("Error:", error);
  });

 

• **promise1**과 **promise2**가 병렬로 실행되며, 모두 완료되었을 때 결과를 배열로 반환함.
• (2) Promise.race()
• 여러 Promise 중 가장 먼저 완료되는 Promise의 결과를 반환함.
• 먼저 완료되는 작업만 처리하고, 나머지는 무시함.

const slowPromise = new Promise((resolve) => setTimeout(() => resolve("Slow Promise"), 3000));
const fastPromise = new Promise((resolve) => setTimeout(() => resolve("Fast Promise"), 1000));

Promise.race([slowPromise, fastPromise])
  .then((result) => {
    console.log(result); // "Fast Promise"
  });

• **fastPromise**가 1초 후에 먼저 완료되므로, 가장 빠른 결과를 반환함.

6. Promise의 상태

• pending: Promise가 아직 이행되지 않은 상태. 비동기 작업이 진행 중일 때 이 상태임.
• fulfilled: 비동기 작업이 성공적으로 완료된 상태. resolve()가 호출되면 이 상태가 됨.
• rejected: 비동기 작업이 실패한 상태. reject()가 호출되면 이 상태가 됨.

7. Async/Await와 Promise

**async/await**는 Promise를 더 간단하게 사용할 수 있게 만들어주는 문법임. await 키워드를 사용하면 Promise가 이행될 때까지 기다렸다가 그 결과를 반환함. 이는 비동기 작업을 마치 동기적인 코드처럼 작성할 수 있게 해줌.

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched"), 1000);
  });
};

const process = async () => {
  const data = await fetchData();
  console.log(data); // "Data fetched"
};

process();

• **await**는 Promise가 완료될 때까지 기다린 후 결과를 반환함.
• async/await는 비동기 작업을 처리할 때 코드의 가독성을 높여주는 도구로, Promise와 함께 자주 사용됨.

요약:

• **Promise**는 자바스크립트에서 비동기 작업을 처리할 때 사용하는 객체로, 비동기 작업의 성공 또는 실패를 처리함.
• **resolve()**는 작업 성공 시 호출되고, **reject()**는 작업 실패 시 호출됨.
• **then(), catch(), finally()**를 사용해 작업의 결과나 오류를 처리함.
• 여러 비동기 작업을 순차적 또는 병렬로 처리하기 위해 Promise 체이닝과 **Promise.all()**을 사용할 수 있음.
• **async/await**와 함께 사용하면 비동기 코드를 더 직관적으로 작성할 수 있음.