231128 개발일지 TIL – Uncaught SyntaxError: await is only valid in async functions, async generators and modules

Uncaught SyntaxError: await is only valid in async functions, async generators and modules

	function fetchItemDetail(itemId) {
		console.log(itemId);
		let data = { url: itemId };
		console.log(data);
		try {
			let response = fetch('http://localhost:3015/getItemDetail', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(data)
			});
			console.log(response)
			if (!response.ok) {
				throw new Error('네트워크 응답 오류');
			}
			let data = await response.json();
			console.log(data);
			let detailUrl = data.result.globalData.detailModel.detailUrl;

			// slide Data
			console.log(data.result.data['5908930030308'].data.videoUrl,
					data.result.data['5908930030308'].data.offerImages,
					data.result.data['5908930030308'].data.skuImages);

			let videoUrl = data.result.data['5908930030308'].data.videoUrl;
			let offerImages = data.result.data['5908930030308'].data.offerImages;
			let skuImages = data.result.data['5908930030308'].data.skuImages;

			slideData(videoUrl,offerImages,skuImages);

			return fetchHTML(detailUrl);
		} catch(error) {
			fetchItemDetailSpare(itemId);
		}
	}

문제 원인
'await' 키워드가 비동기 함수 내부에서만 사용될 수 있기 때문인데 'fetchItemDetail' 함수를 비동기 함수로 선언해야 하는데 누락되었다.

해결 방법
'fetchItemDetail' 함수 선언부에 'async' 키워드를 추가하면 문제를 해결할 수 있다. 이렇게 하면 'await' 키워드를 사용해서 비동기적으로 동작하는 코드를 동기적으로 작성할 수 있다.

	async function fetchItemDetail(itemId) {
		console.log(itemId);
		let data = { url: itemId };
		console.log(data);
		try {
			let response = await fetch('http://localhost:3015/getItemDetail', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(data)
			});
			console.log(response)
			if (!response.ok) {
				throw new Error('네트워크 응답 오류');
			}
			let data = await response.json();
			console.log(data);
			let detailUrl = data.result.globalData.detailModel.detailUrl;

			// slide Data
			console.log(data.result.data['5908930030308'].data.videoUrl,
					data.result.data['5908930030308'].data.offerImages,
					data.result.data['5908930030308'].data.skuImages);

			let videoUrl = data.result.data['5908930030308'].data.videoUrl;
			let offerImages = data.result.data['5908930030308'].data.offerImages;
			let skuImages = data.result.data['5908930030308'].data.skuImages;

			slideData(videoUrl,offerImages,skuImages);

			return fetchHTML(detailUrl);
		} catch(error) {
			fetchItemDetailSpare(itemId);
		}
	}

비동기 함수

특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행하는 자바스크립트의 처리 방식을 말한다. 이는 웹 애플리케이션에서 네트워크 요청, 파일 I/O 등의 작업을 수행할 때 특히 유용하다. 비동기 함수는 'async' 키워드를 사용하여 선언한다.

'await' 키워드는 'async'로 선언된 비동기 함수 내에서 사용되며, Promise를 반환하는 함수의 처리가 끝날 때까지 기다렸다가 다음 코드를 실행하게 한다. 즉, 비동기 처리를 동기 처리처럼 코드를 작성할 수 있게 해준다.

async function asyncFunction() {
  let value = await promiseFunction();
  console.log(value);
}

asyncFunction();
console.log('이 메시지는 바로 출력');

위의 예시 코드에서 'promiseFunction()'은 Promise를 반환하는 함수이다. 'await' 키워드 때문에 'promiseFunction()'의 처리가 끝날 때까지 기다린 후 'console.log(value);'를 실행한다. 그러나 비동기 처리이기 때문에 'asyncFunction()' 호출 후 바로 'console.log('이 메시지는 바로 출력');'이 실행되며, 'promiseFunction()'의 처리가 끝나면 그 후에 'console.log(value);'가 실행된다. 이처럼 'await'는 비동기 처리를 동기적으로 보이게 만들어 코드의 가독성을 높여준다.