약속 및 비동기/대기

누구나 한 번쯤은 콜백 지옥에 빠졌을 것이다. 콜백 지옥에 빠지면 코드가 너무 가독성이 떨어지고 코드를 작성하는 사람은 골칫거리가 됩니다. 코드를 비동기식으로 작성할 때 더 효율적인 방법인 Promise & async/await를 공부하여 이 지옥에서 벗어나자.

약속하다

Promise와 async/await는 모두 개발자가 더 읽기 쉽고 유지 관리하기 쉬운 방식으로 비동기 코드를 작성하고 처리할 수 있게 해주는 기능입니다. Promise는 비동기 작업 및 그 결과의 완료(성공 또는 실패)를 나타내는 객체입니다. 이것이 기존 콜백보다 효율적인 이유는 무엇입니까?

Promise가 생성되면 보류 상태가 되고 결과는 값으로 해결되거나 오류와 함께 거부될 수 있습니다. Promise는 아래 코드와 같이 then으로 연결될 수 있으며 출력 값을 전달할 수 있습니다. 이렇게 하면 작업 결과를 처리할 수 있으며 마지막에 catch 문을 사용하여 오류를 즉시 처리할 수도 있습니다.

이것은 약속의 예입니다.

const testPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('success!!');
    }, 4000);
  });
};

testPromise()
  .then((data) => {  //데이터를 넘겨 받아 처리합니다.
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

비동기/대기

async/await는 약속을 사용하기 위해 존재하는 구문입니다. 비동기 코드는 동기식으로 작성할 수 있으므로 더 쉽게 읽고 이해할 수 있습니다.

방법은 다음과 같습니다. async는 비동기 함수를 선언할 때 사용되며 await는 약속이 해결되기를 기다리는 데 사용됩니다. 대기를 사용하면 Promise가 해결되거나 거부될 때까지 코드 실행이 일시 중지됩니다. 다음 코드를 보면서 이해해 봅시다.

const testPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('success!!');
    }, 4000);
  });
};

const getData = async () => {
  try {
    const data = await testPromise();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

getData();

위의 코드에서 testPromise 함수는 약속을 반환하고 wait 를 사용하여 콘솔에 데이터를 쓰기 전에 약속이 해결되거나 거부될 때까지 기다립니다. 비동기로 선언된 GetData 함수는 내부에서 대기를 사용할 수 있습니다.