[자바스크립트] async 와 await

JavaScript에서 async/await은 비동기적으로 실행되는 코드를 더 쉽게 작성하고 관리하기 위한 기능입니다. 이전에는 Promise를 사용하여 비동기 코드를 처리했지만, Promise를 처리하기 위해 then/catch 등의 콜백 함수를 작성해야 했습니다. 이는 코드의 가독성을 낮추고 에러 핸들링을 어렵게 만들 수 있습니다.

 

1. 간단한 사용법

async/await은 이러한 문제를 해결하기 위해 등장했습니다. async/await은 함수의 반환값을 Promise로 만들어주며, async 함수 내부에서 await 키워드를 사용하여 Promise가 resolve될 때까지 기다릴 수 있습니다. 이로 인해 코드의 가독성이 향상되며, 에러 핸들링도 간편해집니다.

1) async 함수의 특징

• async 키워드로 선언합니다.
• async 함수 내에서는 await 키워드를 사용할 수 있습니다.
• async 함수는 항상 Promise를 반환합니다.

예를 들어, 다음은 Promise를 사용한 코드와 async/await을 사용한 코드를 비교한 예시입니다.

 

// Promise를 사용한 예시
function getData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
}

// async/await을 사용한 예시
async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

위의 두 코드는 동일한 기능을 수행하지만, async/await을 사용한 코드는 Promise를 사용한 코드보다 가독성이 좋고 에러 핸들링도 간편합니다.

따라서 async/await은 JavaScript에서 비동기 코드를 작성하는 데 매우 유용한 기능입니다.

 

2. 쉽게 하는 실수

 

async/await을 사용할 때 가장 쉽게 저지를 수 있는 실수는 await 키워드를 사용할 함수가 Promise를 반환하지 않을 때입니다. 이 경우, await 키워드는 해당 함수를 동기적으로 실행하고, 반환값을 바로 리턴합니다. 따라서, 이러한 함수를 await 키워드와 함께 사용하면 비동기 코드를 동기적으로 실행하게 되어 의도치 않은 결과를 초래할 수 있습니다.

또 다른 실수로는, await 키워드를 사용하는 함수를 try-catch 블록으로 감싸지 않는 것입니다. 만약 해당 함수에서 에러가 발생하면, Promise가 reject됩니다. 따라서, 이를 적절히 처리하지 않으면 예기치 않은 에러가 발생할 수 있습니다.

마지막으로, async/await을 남발하는 것도 좋지 않은 습관입니다. 모든 비동기 코드에 async/await을 사용하면 코드가 더욱 복잡해질 수 있습니다. 따라서, 간단한 Promise 체이닝으로 처리할 수 있는 경우에는 async/await 대신 Promise를 사용하는 것이 좋습니다.