목차
JavaScript Promise: JavaScript는 비동기 처리에 대한 여러 가지 패턴을 제공합니다. 그 중 하나인 Promise는 매우 특별한 객체로, 비동기 작업의 결과를 미리 약속(promising)하는 역할을 합니다. 여기서 약속이라는 것은 일정한 시점에 결과값이나 실패 이유를 제공하는 것을 의미합니다.
1. JavaScript Promise란 무엇인가요?
비동기 작업을 추상화한 객체로, 비동기 작업의 최종 완료(또는 실패) 및 그 결과 값을 나타내는 객체가 바로 Promise입니다. 이것은 즉시 계산되지 않고 나중에 계산될 수 있는 값을 나타냅니다.
2. JavaScript Promise객체 생성하기
Promise 객체는 ‘new Promise’ 키워드를 사용하여 생성합니다. 이를 통해 비동기 연산을 수행할 수 있고, 그 연산의 성공, 실패 여부에 따라 결과를 다르게 처리할 수 있습니다. 이런 처리는 각각 resolve와 reject라는 두 개의 콜백 함수를 통해 이루어집니다. 아래는 Promise 객체를 생성하는 기본적인 방법입니다.
<code>
const pr = new Promise ((resolve, reject) => {
// code
});
</code>3. JavaScript Promise의 상태 이해하기
Promise 객체는 세 가지 상태를 가집니다: ‘pending’, ‘fulfilled’, 그리고 ‘rejected’.
- 처음 Promise 객체가 생성되면 그 상태는 ‘pending'(대기중)입니다. 이 상태에서는 Promise의 결과 값이 아직 결정되지 않았습니다.
- 비동기 작업이 성공적으로 완료되면 ‘resolve’ 함수를 호출하여 Promise의 상태를 ‘fulfilled'(이행됨)로 변경합니다. 이 상태에서는 비동기 작업의 결과 값을 가지게 됩니다.
- 반대로 비동기 작업이 실패하면 ‘reject’ 함수를 호출하여 Promise의 상태를 ‘rejected'(거부됨)으로 변경합니다. 이 상태에서는 작업 중 발생한 에러를 가지게 됩니다.
4. JavaScript Promise이용하기
Promise 객체는 ‘then’ 메소드를 이용하여 비동기 작업이 완료된 후 실행할 코드를 정의할 수 있습니다. ‘then’ 메소드는 Promise의 상태가 ‘fulfilled’로 변경될 때 호출되는 콜백 함수를 인자로 받습니다. 즉, 이 메소드를 통해 비동기 작업이 성공적으로 완료된 경우의 처리를 정의할 수 있습니다.
5. JavaScript Promise체이닝
Promise의 또 다른 중요한 특징은 체이닝입니다. Promise는 그 결과를 이용해 연속적인 작업을 실행할 수 있는 방법을 제공하는데, 이를 ‘Promise 체이닝’이라고 합니다. 이를 통해 여러 개의 비동기 작업을 순서대로 처리할 수 있습니다.
6. 에러 핸들링
JavaScript Promise에서는 ‘catch’ 메소드를 이용하여 에러를 처리합니다. 비동기 작업 중에 에러가 발생할 경우, ‘catch’ 메소드는 Promise의 상태가 ‘rejected’로 변경될 때 호출되는 콜백 함수를 인자로 받습니다. 이를 통해 비동기 작업이 실패한 경우의 처리를 정의할 수 있습니다.
7. 추가 개념과 사용법
이전에 우리는 JavaScript의 Promise에 대한 기본적인 이해를 획득했습니다. 이번에는 Promise의 추가적인 개념과 사용법에 대해 살펴보도록 하겠습니다. 이를 통해 비동기 처리의 복잡성을 다루는 데 더욱 효율적인 방법을 찾을 수 있습니다.
Promise.all
Promise.all은 여러 개의 Promise를 병렬로 처리할 때 사용합니다. 이 메소드는 Promise 객체들의 배열을 인자로 받아, 모든 Promise가 성공적으로 이행되었을 때만 ‘fulfilled’ 상태가 되고, 그 결과값들을 배열로 반환합니다. 만약 하나라도 실패하면, Promise.all 자체가 ‘rejected’ 상태가 됩니다.
<code>
Promise.all([promise1, promise2, promise3])
.then((results) => {
console.log(results); // 모든 promise의 결과값 배열
})
.catch((error) => {
console.log(error);
});
</code>Promise.race
Promise.race 메소드는 여러 개의 Promise 중 가장 먼저 완료되는 Promise의 결과 또는 에러를 반환합니다.
<code>
Promise.race([promise1, promise2, promise3])
.then((value) => {
console.log(value); // 가장 먼저 완료된 promise의 결과값
})
.catch((error) => {
console.log(error);
});
</code>Promise.allSettled
Promise.allSettled는 Promise.all과 유사하게 여러 개의 Promise를 동시에 처리하지만, 모든 Promise가 settled(완료)될 때까지 기다립니다. 이는 ‘fulfilled’ 상태뿐만 아니라 ‘rejected’ 상태에도 해당됩니다. 따라서 이 메소드를 사용하면, 모든 비동기 작업이 완료된 후에 어떤 작업이 성공했고, 어떤 작업이 실패했는지 확인할 수 있습니다.
<code>
Promise.allSettled([promise1, promise2, promise3])
.then((results) => {
results.forEach((result) => {
console.log(result.status); // 'fulfilled' 또는 'rejected'
console.log(result.value); // fulfilled 상태일 때의 결과값
console.log(result.reason); // rejected 상태일 때의 에러
});
});
</code>Promise.catch와 Promise.finally
Promise.catch는 앞선 비동기 작업 중 하나라도 에러가 발생했을 때 이를 처리합니다. 이는 각각의 Promise에서 별도로 catch를 설정하는 것이 아니라, 한 곳에서 모든 에러를 관리하도록 돕습니다.
Promise.finally는 Promise가 성공하든 실패하든 항상 실행되는 코드를 정의할 수 있습니다. 이를 통해 자원을 정리하는 등의 작업을 할 수 있습니다.
<code>
myPromise
.then((value) => {
// 작업 수행
})
.catch((error) => {
// 에러 처리
})
.finally(() => {
// 항상 실행할 작업
});
</code>이렇게 Promise는 JavaScript에서 비동기 처리를 다루는 강력한 도구입니다. 여러 가지 메소드를 이용하면 복잡한 비동기 작업도 효율적으로 관리할 수 있습니다. 따라서 이러한 메소드들에 대해 잘 알아두고, 적절히 활용하는 것이 중요합니다.
Promise는 JavaScript에서 비동기 처리를 위한 강력한 도구입니다. 이를 잘 활용하면 비동기 코드를 효율적으로 관리할 수 있습니다. 프로그래밍에서 비동기 처리는 매우 중요한 주제이므로, Promise를 깊이 이해하고 잘 활용하는 것이 중요합니다.
javascript promise에 대한 추가적인 내용은 문서를 확인하시기 바랍니다.
개발에 대해 많은 정보들이 제 블로그에 방문하시면 확인할 수 있습니다.