자바스크립트의 Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 배열이나 객체처럼 독자적인 객체이다. 비동기 작업이 끝날 때까지 결과를 기다리는 것이 아니라, 결과를 제공하겠다는 '약속'을 반환한다는 의미에서 Promise라고 이름이 지어졌다.
사용 방법
Promise 객체 생성
Promise 객체를 생성하려면 new 키워드와 Promise 생성자 함수를 사용하면 된다. Promise 생성자 함수 안에 두 개의 매개변수를 가진 콜백 함수를 넣게 되는데, 첫번째 인자는 작업이 성공했을 때 성공(resolve)을 알리는 객체, 두번째 인자는 작업이 실패(reject)했을 때 실패를 알려주는 오류 객체이다.
// Promise 생성자 안에 들어가는 콜백 함수를 executor라고 함
const myPromise = new Promise((resolve, reject) => {
// 비동기 작업 수행
const data = fetch('서버로부터 요청할 URL');
if(data)
resolve(data); // 만일 요청이 성공하여 데이터가 있다면
else
reject("Error"); // 만일 요청이 실패하여 데이터가 없다면
})
Promise 객체 처리
Promise 객체는 비동기 작업이 완료된 이후에 작업 결과에 따라 '.then'과 '.catch()' 메서드 체이닝을 통해 성공과 실패에 대한 후속 작업을 진행할 수 있다.
만일 처리가 성공하여 프로미스 객체 내부에서 resolve(data)를 호출하게 되면, 바로 '.then()'으로 이어져 `then` 메서드의 콜백 함수에서 성공에 대한 추가 작업을 진행한다. 호출한 `resolve()`함수의 매개변수의 값이 `then`메서드의 콜백 함수 인자로 들어가 `then` 메서드 내부에서 프로미스 객체 내부에서 다룬 값을 사용할 수 있게 된다.
반대로 처리가 실패하여 `reject(error)`를 호출하게 되면, 바로 `.catch()`로 이어져 `catch`메서드의 콜백 함수에서 실패에 대한 추가 작업을 진행한다.
myPromise
.then((value) => { // 성공적으로 수행했을 때 실행될 코드
console.log("Data: ", value); // 위에서 return resolve(data)의 data값이 출력된다
})
.catch((error) => { // 실패했을 때 실행될 코드
console.error(error); // 위에서 return reject("Error")의 "Error"가 출력된다
})
.finally(() => { // 성공하든 실패하든 무조건 실행될 코드
})
Promise 함수 등록
Promise 객체를 변수에 바로 할당하는 방식을 사용할 수도 있지만, 보통은 함수로 감싸서 사용하는 것이 일반적이다.
(*프로미스 팩토리 함수 : 프로미스를 생성하여 반환하는 함수)
// 프로미스 객체를 반환하는 함수 생성
function myPromise() {
return new Promise((resolve, reject) => {
if (/* 성공 조건 */) {
resolve(/* 결과 값 */);
} else {
reject(/* 에러 값 */);
}
});
}
// 프로미스 객체를 반환하는 함수 사용
myPromise()
.then((result) => {
// 성공 시 실행할 콜백 함수
})
.catch((error) => {
// 실패 시 실행할 콜백 함수
});
함수를 만들고 그 함수를 호출하면 프로미스 생성자를 return 함으로써, 바로 생성된 프로미스 객체를 함수 반환값으로 얻어 사용하는 방식이다. 이렇게 함수로 만들어서 사용하는 이유는 3가지 정도 있다.
- 재사용성 : 프로미스 객체를 함수로 만들면 필요할 때마다 호출하여 사용함으로써, 반복되는 비동기 작업을 효율적으로 처리할 수 있다.
- 가독성 : 프로미스 객체를 함수로 만들면 코드의 구조가 명확해져 비동기 작업의 정의와 사용을 분리하여 코드의 가독성을 높일 수 있다.
- 확장성 : 프로미스 객체를 함수로 만들면 인자를 전달해 동적으로 비동기 작업을 수행할 수 있다. 또한 여러 개의 프로미스 객체를 반환하는 함수들을 연결하여 복잡한 비동기 로직을 구현할 수 있다.
이러한 이유로 대부분의 자바스크립트 비동기 라이브러리도 함수 형태로 프로미스 객체를 제공한다. 대표적으로 자바스크립트의 fetch() 메서드가 있는데, 이 fetch() 메서드 내에서 프로미스 객체를 생성해 서버로부터 데이터를 가져오면 `resolve()` 하여 `.then`으로 처리하기 때문이다.
// GET 요청 예시
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json()) // 응답 객체에서 JSON 데이터를 추출한다.
.then((data) => console.log(data)); // JSON 데이터를 콘솔에 출력한다.
프로미스 3가지 상태 - 미작성
Reference
자바스크립트 Promise 개념 & 문법 정복하기
'프론트엔드 > JavaScript' 카테고리의 다른 글
[모던 자바스크립트 Deep Dive] 06장 - 데이터 타입 (2) | 2024.11.18 |
---|---|
디바운스(Debounce), 쓰로틀(Throttle) (0) | 2024.11.17 |
[모던 자바스크립트 Deep Dive] 05장 - 표현식과 문 (3) | 2024.11.09 |
[ESM] ES Module에 대해 (3) | 2024.11.06 |
[모던 자바스크립트 Deep Dive] 04장 - 변수 (1) | 2024.11.05 |
자바스크립트의 Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 배열이나 객체처럼 독자적인 객체이다. 비동기 작업이 끝날 때까지 결과를 기다리는 것이 아니라, 결과를 제공하겠다는 '약속'을 반환한다는 의미에서 Promise라고 이름이 지어졌다.
사용 방법
Promise 객체 생성
Promise 객체를 생성하려면 new 키워드와 Promise 생성자 함수를 사용하면 된다. Promise 생성자 함수 안에 두 개의 매개변수를 가진 콜백 함수를 넣게 되는데, 첫번째 인자는 작업이 성공했을 때 성공(resolve)을 알리는 객체, 두번째 인자는 작업이 실패(reject)했을 때 실패를 알려주는 오류 객체이다.
// Promise 생성자 안에 들어가는 콜백 함수를 executor라고 함
const myPromise = new Promise((resolve, reject) => {
// 비동기 작업 수행
const data = fetch('서버로부터 요청할 URL');
if(data)
resolve(data); // 만일 요청이 성공하여 데이터가 있다면
else
reject("Error"); // 만일 요청이 실패하여 데이터가 없다면
})
Promise 객체 처리
Promise 객체는 비동기 작업이 완료된 이후에 작업 결과에 따라 '.then'과 '.catch()' 메서드 체이닝을 통해 성공과 실패에 대한 후속 작업을 진행할 수 있다.
만일 처리가 성공하여 프로미스 객체 내부에서 resolve(data)를 호출하게 되면, 바로 '.then()'으로 이어져 then
메서드의 콜백 함수에서 성공에 대한 추가 작업을 진행한다. 호출한 resolve()
함수의 매개변수의 값이 then
메서드의 콜백 함수 인자로 들어가 then
메서드 내부에서 프로미스 객체 내부에서 다룬 값을 사용할 수 있게 된다.
반대로 처리가 실패하여 reject(error)
를 호출하게 되면, 바로 .catch()
로 이어져 catch
메서드의 콜백 함수에서 실패에 대한 추가 작업을 진행한다.
myPromise
.then((value) => { // 성공적으로 수행했을 때 실행될 코드
console.log("Data: ", value); // 위에서 return resolve(data)의 data값이 출력된다
})
.catch((error) => { // 실패했을 때 실행될 코드
console.error(error); // 위에서 return reject("Error")의 "Error"가 출력된다
})
.finally(() => { // 성공하든 실패하든 무조건 실행될 코드
})
Promise 함수 등록
Promise 객체를 변수에 바로 할당하는 방식을 사용할 수도 있지만, 보통은 함수로 감싸서 사용하는 것이 일반적이다.
(*프로미스 팩토리 함수 : 프로미스를 생성하여 반환하는 함수)
// 프로미스 객체를 반환하는 함수 생성
function myPromise() {
return new Promise((resolve, reject) => {
if (/* 성공 조건 */) {
resolve(/* 결과 값 */);
} else {
reject(/* 에러 값 */);
}
});
}
// 프로미스 객체를 반환하는 함수 사용
myPromise()
.then((result) => {
// 성공 시 실행할 콜백 함수
})
.catch((error) => {
// 실패 시 실행할 콜백 함수
});
함수를 만들고 그 함수를 호출하면 프로미스 생성자를 return 함으로써, 바로 생성된 프로미스 객체를 함수 반환값으로 얻어 사용하는 방식이다. 이렇게 함수로 만들어서 사용하는 이유는 3가지 정도 있다.
- 재사용성 : 프로미스 객체를 함수로 만들면 필요할 때마다 호출하여 사용함으로써, 반복되는 비동기 작업을 효율적으로 처리할 수 있다.
- 가독성 : 프로미스 객체를 함수로 만들면 코드의 구조가 명확해져 비동기 작업의 정의와 사용을 분리하여 코드의 가독성을 높일 수 있다.
- 확장성 : 프로미스 객체를 함수로 만들면 인자를 전달해 동적으로 비동기 작업을 수행할 수 있다. 또한 여러 개의 프로미스 객체를 반환하는 함수들을 연결하여 복잡한 비동기 로직을 구현할 수 있다.
이러한 이유로 대부분의 자바스크립트 비동기 라이브러리도 함수 형태로 프로미스 객체를 제공한다. 대표적으로 자바스크립트의 fetch() 메서드가 있는데, 이 fetch() 메서드 내에서 프로미스 객체를 생성해 서버로부터 데이터를 가져오면 resolve()
하여 .then
으로 처리하기 때문이다.
// GET 요청 예시
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json()) // 응답 객체에서 JSON 데이터를 추출한다.
.then((data) => console.log(data)); // JSON 데이터를 콘솔에 출력한다.
프로미스 3가지 상태 - 미작성
Reference
자바스크립트 Promise 개념 & 문법 정복하기
'프론트엔드 > JavaScript' 카테고리의 다른 글
[모던 자바스크립트 Deep Dive] 06장 - 데이터 타입 (2) | 2024.11.18 |
---|---|
디바운스(Debounce), 쓰로틀(Throttle) (0) | 2024.11.17 |
[모던 자바스크립트 Deep Dive] 05장 - 표현식과 문 (3) | 2024.11.09 |
[ESM] ES Module에 대해 (3) | 2024.11.06 |
[모던 자바스크립트 Deep Dive] 04장 - 변수 (1) | 2024.11.05 |