비동기 처리 방법 3가지 !비교!

❓비동기 처리(asynchronous processing)
프로그램이 작업을 시작한 후에 완료되기를 기다리지 않고 다른 작업을 계속 수행할 수 있게 해주는 프로그래밍 기법

✨비동기 처리 방법 3가지

1. 콜백

• 가장 기본적인 비동기 처리방식
• 비동기 작업을 완료한 후 호출되는 함수
• 여러 개의 중첩된 콜백을 사용하면 가독성이 떨어짐
• setTimeout(), 이벤트 처리 함수 등…

function fetchData(callback) {
    setTimeout(() => {
        callback("data received");
    }, 1000);
}

fetchData((data) => {
    console.log(data); // "data received"
});

2. Promise

• 콜백 지옥과 같은 문제를 해결하기 위한 목적으로 등장
• 비동기 작업의 최종 성공 또는 실패를 나타내는 객체
  
  • Pending: 아직 결과 값이 반환되지 않은 진행 중인 상태
  • fulfilled: 성공
  • rejected: 실패
  • settled: 결과 값이 성공 혹은 실패로 반환된 상태 ⇒ settled된 값은 재실행 될 수 없다.
• 성공 시 resolve 콜백을 호출하고, 실패 시 reject 콜백을 호출함
• .then()과 .catch()를 사용해 비동기 작업의 결과를 처리함
  • then 메소드는 Promise 객체 반환 → then, catch 메소드 사용가능 → 연속적인 then 메소드 사용 → Promise chaining
  • catch 이후에도 chaining 가능

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("data received");
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // "data received"
    })
    .catch(error => {
        console.error(error);
    });

2-1. Promise.all()

• 배열로 된 여러 개의 프로미스들을 인자로 받아 단 하나의 프로미스를 반환함
• 모든 프로미스가 성공적으로 이행되면 결과 배열이 반환되며, 하나라도 실패하면 첫 번째 실패한 프로미스의 결과가 반환

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 1'), 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 2'), 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 3'), 3000);
});

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results); // ['Promise 1', 'Promise 2', 'Promise 3']
  })
  .catch(error => {
    console.error(error); // 첫 번째 실패한 프로미스의 에러
  });

3. async/await

• 프로미스를 기반으로 동작하며, 비동기 코드를 동기식처럼 작성할 수 있도록 함
• async 함수 내부에서 await 키워드를 사용하여 프로미스가 처리될 때까지 대기하고, 그 결과를 반환함

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("data received");
        }, 1000);
    });
}

async function getData() {
    try {
        const data = await fetchData();
        console.log(data); // "data received"
    } catch (error) {
        console.error(error);
    }
}

getData();

 

🔥결론

• 콜백은 간단한 비동기 작업에는 적합하지만, 중첩될수록 콜백지옥에 빠진다.
• Promise는 콜백의 단점을 보완하며 체이닝과 일관된 에러 처리를 제공하지만, 여전히 중첩 문제가 존재할 수 있다.
• async/await는 가독성과 에러 처리 측면에서 가장 직관적이며, promise의 장점을 유지하면서도 동기식 코드처럼 작성할 수 있게 해준다.