2.1 프로미스 생성
프로미스는 비동기 작업의 완료(혹은 실패)와 그 결과를 나타내는 객체야. ES6 (ECMAScript 2015)에서 도입되었고, JavaScript에서 비동기 코드를 다루는 표준 방법이 되었어.
주요 개념
프로미스는 세 가지 상태 중 하나를 가질 수 있어:
- Pending (대기 중): 초기 상태, 아직 수행되지 않음.
- Fulfilled (성공): 작업이 성공적으로 완료됨.
- Rejected (실패): 작업이 실패함.
프로미스 생성
프로미스는 Promise 생성자를 사용하여 만들어져. 이 생성자는 실행 함수 (executor function)를 인자로 받아. 이 함수는 두 개의 인자를 받아: resolve와 reject. 이 함수 안에는 비동기 코드가 수행되는데, 성공 시에는 resolve를 호출하고, 실패 시에는 reject를 호출해.
문법:
const promise = new Promise((resolve, reject) => {
// 비동기 작업
if (/* 성공적으로 완료되면 */) {
resolve(value); // 성공
} else {
reject(error); // 실패
}
});
프로미스를 생성하는 예:
const myPromise = new Promise((resolve, reject) => {
const success = true; // 성공 조건
if (success) {
resolve('Operation was successful');
} else {
reject('Operation failed');
}
});
2.2 프로미스 사용하기
then 메서드
then 메서드는 프로미스가 성공적으로 완료되었을 때 처리를 위해 사용돼. 이 메서드는 첫 번째로 성공 처리를 위한 함수, 두 번째로 오류 처리를 위한 함수를 받아. 하지만 일반적으로 오류 처리를 위해 catch 메서드를 사용해.
then 사용 예:
myPromise.then(
(successMessage) => {
console.log(successMessage); // 출력: Operation was successful
},
(errorMessage) => {
console.error(errorMessage); // 오류 시 호출됨
}
);
catch 메서드
catch 메서드는 프로미스의 오류 처리를 위해 사용돼. 이 메서드는 프로미스가 거부될 경우 호출될 하나의 함수를 받아.
catch 사용 예:
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage); // 출력됨: Operation failed
});
finally 메서드
finally 메서드는 프로미스의 결과와 상관없이 코드를 실행하기 위해 사용돼. 이 메서드는 인자를 받지 않고, 프로미스가 완료되거나 거부된 후에 항상 실행돼.
finally 사용 예:
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage);
})
.finally(() => {
console.log('Operation completed'); // 항상 호출됨
});
2.3 프로미스 사용 예제
예제 1: 프로미스를 사용한 비동기 작업
타이머를 사용한 비동기 작업 시뮬레이션.
function asyncOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve('Async operation was successful');
} else {
reject('Async operation failed');
}
}, 2000);
});
}
asyncOperation()
.then((message) => {
console.log(message);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Async operation completed');
});
예제 2: 프로미스의 순차적 실행
순차적인 비동기 작업 시뮬레이션.
function firstOperation() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('First operation completed');
resolve('First result');
}, 1000);
});
}
function secondOperation(result) {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Second operation completed');
resolve(`Second result, received: ${result}`);
}, 1000);
});
}
firstOperation()
.then((result) => {
return secondOperation(result);
})
.then((finalResult) => {
console.log(finalResult);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Both operations completed');
});
예제 3: Promise.all을 사용한 프로미스의 병렬 실행
병렬 비동기 작업 시뮬레이션.
function operationOne() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation One completed');
resolve('Result One');
}, 1000);
});
}
function operationTwo() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation Two completed');
resolve('Result Two');
}, 1500);
});
}
Promise.all([operationOne(), operationTwo()])
.then((results) => {
console.log('All operations completed');
console.log(results); // 출력: ['Result One', 'Result Two']
})
.catch((error) => {
console.error('One of the operations failed', error);
});
GO TO FULL VERSION