async~await 도입 배경
JavaScript에서는 네트워크 요청과 같은 시간이 걸리는 작업을 처리할 때 보통 비동기 방식을 사용합니다. 이런 방식을 사용하면 시간이 걸리는 작업이 완료되는 동안 다른 코드를 실행할 수 있어 효율적입니다. 하지만, 비동기 작업의 결과를 기다려야 하는 경우에는 코드 작성이 복잡해질 수 있기 때문에 도입되었다.
async~await
자바스크립트에서 사용되는 비동기 처리 패턴 중 하나로, 이 패턴을 통해 "비동기적인 코드를 마치 동기적인 코드처럼" 보이게 작성할 수 있다.
- async : 함수가 비동기적임을 나타내는 키워드로, 해당 키워드가 사용된 이 비동기 함수는 Promise를 반환하며, 비동기 처리를 지원한다.
- await : await 키워드 뒤에 오는 Promise가 완료될 때까지 async 함수의 실행을 일시 중단(비동기 작업이 완료될 때까지 기다린다)하고, Promise의 결과를 반환하도록 하는 키워드로, await 반드시 async 함수 안에서만 사용할 수 있다.
대표적인 비동기의 예시인 네트워크 통신을 통해서 async~await 개념을 코드 예시와 함께 살펴보자. fetch는 비동기적으로 작동하는 대표적인 Web API이다.
async/await
비동기 코드를 마치 동기 코드처럼 순차적으로 작성할 수 있기 때문에 코드의 가독성 및 유지보수에 용이하다.
//async~await
async function getJsonData(url){
try{
let response = await fetch(url); //url에서 데이터를 가져오는 데 시간이 소요되는 비동기 작업.
let data = await response.json(); //response를 JSON으로 파싱하는 데 시간이 소요되는 비동기 작업.
return data; // 파싱된 데이터 반환
} catch(error){
console.log(error);
}
}//promise
function fetchData(){
return fetch(
'https://www.7timer.info/bin/astro.php?lon=113.2&lat=23.1&ac=0&unit=metric&output=json&tzshift=0').then((reponse) => reponse.json())
};
fetchData().then(data=>console.log(data));
Q & A
-
Q) Async/Await를 사용할 때의 주의점은 무엇인가요?
A) Async/Await를 사용할 때 주의할 점은 비동기 작업이 완료될 때까지 코드의 실행을 멈추기 때문에, 잘못 사용하면 불필요하게 실행을 멈출 수 있다는 점입니다. 또한, 여러 비동기 작업이 있는 경우, 불필요하게 작업을 직렬로 처리하면 비효율적일 수 있습니다. 가능하면 Promise.all과 같은 함수를 사용하여 비동기 작업을 병렬로 처리하는 것이 좋습니다. -
Q) Async 함수에서 에러 처리는 어떻게 합니까?
A) Async 함수 내부에서 에러 처리를 하기 위해서는 try/catch 블록을 사용합니다. Await 표현식을 try 블록 내부에 두면, Promise가 거부되면 해당 거부 값이 catch 블록으로 전달됩니다. 이는 동기 코드에서의 try/catch 사용법과 매우 유사하여, 코드의 일관성을 유지하는 데 도움이 됩니다. -
Q) Await 키워드는 어떤 작업에 대해 사용하나요?
A) Await 키워드는 Promise 객체에 대해 사용합니다. Await는 Promise가 settle될 때까지, 즉 fulfilled 또는 rejected 상태가 될 때까지 함수의 실행을 일시 중단합니다. Promise가 fulfilled 상태가 되면, Await는 Promise의 결과 값을 반환합니다. Promise가 rejected 상태가 되면, Await는 Promise가 거부한 이유를 던집니다. -
Q) Async/Await와 Promise의 차이점은 무엇인가요?
A) Async/Await와 Promise 모두 비동기 작업을 다루는 방법입니다. Promise는 비동기 작업의 최종 완료(또는 거부)와 그 결과 값을 나타냅니다. .then()과 .catch() 메서드를 체이닝하여 비동기 작업이 성공적으로 완료되었을 때와 그렇지 않을 때를 처리할 수 있습니다.
반면에 Async/Await는 Promise를 더 쉽게 다루는 구문입니다. Async/Await를 사용하면 비동기 코드를 마치 동기적인 코드처럼 작성할 수 있습니다. 이는 코드의 가독성을 높이고, 비동기 코드의 복잡성을 줄여줍니다. 하지만 Async/Await 역시 내부적으로는 Promise를 사용합니다.
요약
💡 async/await는 비동기적인 작업을 처리할 수 있는 자바스크립트 문법으로, async 함수를 정의하고 함수 내부에 await를 통해 비동기적으로 처리되는 작업이 완료될 때까지 기다리게한 다음, 결과값을 반환하도록 처리한다. async 함수는 항상 Promise 객체를 반환하며, await를 통해 비동기 처리 결과를 기다린다. async/await는 비동기적인 작업을 동기적으로 보이게 작성할 수 있기 때문에 코드의 가독성이 높아진다는 장점이 있다.
참고자료
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/try...catch
