본문 바로가기
IT/javascript

자바스크립트 async와 await

by 뉴코딩맨 2023. 4. 19.
JavaScript의 async/await 함수는 비동기 처리를 더 쉽게 할 수 있도록 하는 기능입니다. async 키워드를 함수 앞에 붙여 해당 함수를 비동기 함수로 만들 수 있으며, 이 함수 내에서 await 키워드를 사용하여 다른 비동기 함수의 결과를 기다릴 수 있습니다.
 
async/await는 Promise를 기반으로 구현되어 있습니다. async 함수는 내부적으로 Promise 객체를 반환하며, await 키워드를 사용한 함수 호출은 Promise가 완료될 때까지 대기합니다.
 
async/await를 사용하면 코드의 가독성이 향상되고, 오류 처리가 용이해집니다. 이는 Callback Hell과 같은 콜백 함수를 연속적으로 사용해야 하는 경우를 피할 수 있습니다.
 

사용법

 

아래는 async/await를 사용한 예시입니다.
 
async function fetchData() {
	try {
		const response = await fetch('https://api.example.com/data');
		const data = await response.json();
		console.log(data);
	} catch(error) {
		console.error(error);
	}
}
 
위 예시에서 fetchData 함수는 비동기 함수로, fetch 함수와 response.json() 함수를 호출할 때 await 키워드를 사용하여 결과를 기다립니다. 이를 통해 코드가 실행되는 동안 다른 작업을 수행할 수 있으며, 간결하면서도 가독성이 좋은 코드를 작성할 수 있습니다.

 

하지만 async/await 함수를 사용할 때에도 주의해야 할 점이 있습니다. 이 함수를 사용하더라도, 무한 루프나 무한 대기 상태에 빠질 수 있으므로 주의가 필요합니다. 또한, 이 함수가 프로미스를 기반으로 하고 있으므로 Promise와 관련된 동작 방식을 이해해야 합니다.

'IT > javascript' 카테고리의 다른 글

HTTP 상태 코드(status code)  (0) 2023.04.19
HTTP 요청 메서드(Request method)  (0) 2023.04.19
자바스크립트 콜백 함수(Callback Function)  (0) 2023.04.19
자바스크립트 프로토타입 이란?  (0) 2023.04.18
JSON 이란?  (0) 2023.04.18

댓글