자바스크립트의 Promise

답변 확인

Promise 란?

Promise는 비동기 작업의 성공, 실패 또는 진행 상태를 나중에 사용할 수 있도록 하는 객체, 비동기 작업의 완료 여부를 약속해주는 및 개념 코드의 가독성을 높이는 데 사용

Promise의 상태

1. Pending (대기)

• Promise가 생성되었지만, 아직 작업이 완료되지 않은 상태.

2. Fulfilled (이행)

• 비동기 작업이 성공적으로 완료되어 결과 값을 반환한 상태.

3. Rejected (실패)

• 비동기 작업이 실패하고 오류를 반환한 상태.

상태 특징:

Promise는 Fulfilled 또는 Rejected 상태가 되면 다른 상태로 변경되지 않습니다.

Promise의 기본 구조

Promise는 resolve와 reject라는 두 개의 콜백을 사용하는 비동기 작업을 감쌉

const promise = new Promise((resolve, reject) => {
    const success = true;
 
    if (success) {
        resolve('작업 성공!'); // Fulfilled로 전환
    } else {
        reject('작업 실패!'); // Rejected로 전환
    }
});

Promise 메서드

1. then : Promise가 Fulfilled 상태가 되었을 때 실행할 콜백을 등록

2. catch : Promise가 Rejected 상태가 되었을 때 실행할 콜백을 등록

3. finally : Promise의 성공 여부와 상관없이 항상 실행되는 코드를 등록

promise
    .then((result) => {
        console.log(result); // "작업 성공!"
    })
    .catch((error) => {
        console.error(error); // "작업 실패!"
    })
    .finally(() => {
        console.log('작업 종료');
    });

Promise 동시성

1. Promise.all

• 여러 Promise를 병렬로 실행하고, 모두 Fulfilled가 되었을 때 결과를 반환
• 하나라도 Rejected 상태가 되면 전체가 실패

Promise.all([promise1, promise2])
    .then((results) => console.log(results))
    .catch((error) => console.error(error));

2. Promise.race

• 여러 Promise 중 가장 먼저 완료된 Promise의 결과를 반환

3. Promise.allSettled

• 모든 Promise가 완료될 때까지 기다린 후, 각각의 결과(Fulfilled 또는 Rejected)를 반환

Promise의 장점

1. 가독성 향상

• 콜백 함수의 중첩 문제를 해결하고 체인형 구성이 가능

2. 에러 처리 용이

• .catch로 체인 전체의 에러를 한 곳에서 처리할 수 있음

3. 병렬 작업 관리

• Promise.all이나 Promise.race를 통해 여러 비동기 작업을 효율적으로 관리

Promise의 단점

1. 복잡한 에러 처리

• 단일 체인에서는 에러 처리가 쉽지만, 여러 Promise가 중첩되거나 비동기 흐름이 복잡해질 경우 에러 처리 코드가 길어질 수 있음

2. 콜백 지옥 완전 해결은 아님

• Promise 체인이 길어질수록 여전히 복잡성이 증가할 수 있음

해결 방법: async/await를 사용하여 가독성을 높일 수 있습니다.

Promise와 async/await

async/await는 Promise를 기반으로 하여 비동기 코드를 더 간결하고 직관적으로 작성할 수 있도록 도와줌

Promise

fetch('https://api.example.com/data')
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error(error));

async/await

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}
 
fetchData();