비동기 처리 Promise vs async/await

Promsie와 async/await는 둘 다 JavaScript에서 비동기 처리를 할 때 사용된다.

동기/비동기

• 동기는 서버에 요청을 보냈을때 응답이 돌아와야 다음 동작을 수행한다. A작업이 모두 진행 될때까지 B작업은 대기해야한다.
• 비동기는 서버에 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다. 즉 A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다.

🧙 비동기 동작이 필요한 이유?
우리가 짠 코드는 순차적으로 진행되기 때문에, 대기시간이 발생하는 작업의 경우 그 작업이 끝날 때까지 다음 코드가 실행되지 않는다. 그럼 그 대기하는 시간동안은 아무것도 할 수 없기 때문에 비효율적이다.

예를 들어 API 콜을 하고 UI를 렌더링하는 코드가 있다고 하고, 이 모든 작업을 동기로 처리한다면 짧을수도, 오래 걸릴수도 있는 API 콜이 완료될 때까지 UI는 렌더링되지 않는다. 웹에 접속한 사용자는 한동안 빈 화면을 바라볼 수밖에 없고 이는 사용자 이탈로 일어날 것이다.

그러므로 지금 굳이 기다리지 않아도 되는 작업을 뒤로 미루는 것이 비동기 작업

Promise

• 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타내는 객체
• 아래와 같은 상태를 가진다.

대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
이행(fulfilled): 연산이 성공적으로 완료됨.
거부(rejected): 연산이 실패함.

• ES2015부터 자바스크립트와 노드의 API들이 콜백대신 프로미스 기반으로 재구성되었다.
• 전통적인 콜백 패턴이 가진 단점을 보완, 비동기 처리 시점을 명확하게 표현할 수 있다.

콜백 지옥이란?

getData(function(result) {
    getMoreData(result, function(newResult) {
        getMoreData(newResult, function(finalResult) {
            console.log('The final result is', finalResult);
        }, failureCallback);
    }, failureCallback);
}, failureCallback);

위와 같이 비동기 동작을 이행하는 함수를 호출할 때, 비동기 동작 이후에 후속 처리를 위해서 콜백 함수를 호출하게 된다. 이런 후속 처리가 중첩되면 가독성이 떨어지고 코드 구조가 복잡해진다. 또한 에러가 어디서 일어나기도 어렵다.

Promise를 사용하면?

new Promise((resolve, reject) => {
    getData()
        .then(result1 => getMoreData(result1))
        .then(result2 => getMoreData(result2))
        .then(result3 => resolve(result3))
        .catch(reject);
}).then(result => {
    console.log('The final result is', result);
}).catch(error => {
    console.error(error);
});

Promise를 사용하면 then과 catch 메서드를 통해 진행과 에러처리를 할 수 있다. then이 중첩되더라도 코드 구조가 복잡해지지 않는 걸 볼 수 있다.

또한 Promise.all를 사용해서 promise 여러개를 한번에 실행할 수도 있다

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

const promises = [
  delay(1000).then(() => 'One'),
  delay(2000).then(() => 'Two'),
  delay(1500).then(() => 'Three')
];

Promise.all(promises)
  .then(results => {
    console.log('All promises have resolved:', results);
  })
  .catch(error => {
    console.error('An error occurred:', error);
  });

Promise.all은 모든 promise가 실행 될때까지 기다렸다가 결과를 반환한다. (=then으로 넘어간다) promise 중 하나라도 reject되면, 모든 promise가 reject된다.

async/await

• 프로미스가 콜백 지옥을 해결했지만, 결국 또 then-catch가 반복되기 때문에 코드가 지저분해진다.
• async/await 문법은 프로미스를 사용한 코드를 깔끔하게 줄인다.
• async 함수는 항상 promise를 반환한다. 반환값이 promise가 아니라면 암묵적으로 promise로 감싸진다.

async function fetchData() {
  try {
    const result1 = await getData();
    const result2 = await getMoreData(result1);
    const result3 = await getMoreData(result2);
    console.log('The final result is', result3);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

나는 async/await를 많이 쓴다. try-catch문으로 감싸서 처리할 수 있기 때문에 코드의 가독성이 올라가기 때문이다. 생각해보면 최근에 프론트 작업하면서 Promise 객체를 직접 생성해 본 기억이 없다. 보통 비동기 작업할 때 비동기 작업의 결과물이 Promise 객체로 반환되니까 그 객체를 async/await로 처리했던 기억이 대부분 인듯...

정리

Promise: 비동기 작업의 완료 또는 실패를 나타내는 객체
async/await: Promise 기반의 비동기 코드를 더 간결하고 읽기 쉽게 작성할 수 있도록 도와주는 문법

차이점

1) 문법

• promise는 .then(), .catch()와 같은 체이닝이 필요하다. 중첩되면 코드가 복잡해질 수 있다 (라고는 하지만...🧐 그렇게까지 복잡해진 적이 없어서 공감이 안감)
• async/await는 try, catch 블록을 사용하여 처리한다. 비동기 코드를 동기 코드처럼 작성할 수 있어서 가독성이 높아진다.

2) 후속 처리

• promise는 후속 처리를 then, catch와 같은 메서드로 처리한다
• async/await는 try, catch 블록을 사용하여 처리한다

결론: async/await도 결국 promise를 쓰는 문법이기 때문에 더 마음에 드는 걸 쓰자~