[JavaScript] await, async, fetch를 이용한 동기 처리

• Javascript를 이용해 A라는 함수 내 B 함수를 넣어 입력받은 데이터를 체크한 뒤 나머지 A 함수 로직을 처리해야 했습니다.
  
  
• 비동기 처리를 하게 될 경우 B 함수에서 return false로 처리해도 호출한 A 함수는 정상처리되어 문제가 발생했고, 이에 따라 동기 처리를 해야 했습니다.
  
  
• 동기 처리를 해야 하는 경우 ajax async:false로 처리하거나 callback함수 사용, await&async로 처리하는 방법이 있습니다.
  
  
• await & async를 사용하여 fetch로 처리한 내용을 정리해 봅니다.

---

#. async & await

 

• Javascript에서 비동기 함수를 동기적으로 처리를 하는 데 사용됩니다.
  
  
• async function 함수명() {  }
  
  - async 키워드를 넣어 해당 함수가 비동기 함수임을 나타냅니다.
  
  - async를 선언한 함수 내 await 키워드를 사용하여 비동기 작업의 완료를 기다리게 합니다.
  
  
• await
  
  - 비동기 함수를 호출할 때 그 앞에 넣어 사용합니다.
  
  - Promise 객체를 반환하는 함수 앞에 넣어 사용하기도 합니다.
  
  - await 사용 시 함수가 반환하는 값 또는 객체가 완료될 때까지 기다리고 완료되면 반환하게 됩니다.

---

#. await & async의 장단점

 

• 장점
  
  1. 가독성 향상
  - 비동기 코드를 작성할 때 콜백 함수나 then() 메서드를 사용하는 것보다 await와 async를 사용하면 코드가 훨씬 간결하고 가독성이 좋습니다. 
  
  2. 순서 보장
  - await는 해당 줄의 비동기 작업이 완료될 때까지 다음 코드 실행을 멈추기 때문에, 비동기 작업의 실행 순서를 명확하게 만들어 줍니다. 
  - 콜백 지옥(callback hell)을 방지하고 코드의 관리가 용이해집니다.
  
  3. 예외처리 간소화
  - try catch 블록 내에서 await 키워드를 사용하면 비동기 작업에서 발생한 예외를 쉽게 처리할 수 있습니다.
  
  
• 단점
  
  1. 오류 처리 어려움
  - 코드의 가독성과 관리성이 향상되지만, 오류 처리가 번거로울 수 있습니다.
  - 비동기 함수 내에서 발생한 오류를 캐치하려면 각 await 문 앞에 try catch 문을 사용해야 합니다.
  
  2. 성능 저하 가능성
  - 비동기 함수를 동기 코드처럼 작동하도록 만들기 때문에 연속된 비동기 작업이 많은 경우 성능 저하가 발생할 수 있습니다.
  
  3. 호환성 문제
  - ECMAScript 2017부터 추가된 기능으로, 오래된 브라우저에서는 지원되지 않을 수 있습니다.

---

#. 사용방법

 

• 저장 버튼을 누를 때 입력받은 값을 체크하고 저장하는 함수를 사용하고자 할 때 아래와 같이 처리할 수 있습니다.
  
  
• 하위 함수를 사용할 상위 함수를 생성합니다.
  
  

async function save() {
	// 체크할 내용 입력
	
	// 동기식 처리
	var check = await check();
	if(!check) {
		return false;
	}
	
	// 저장 관련 내용 입력
}

 

---

• 동기식으로 처리할 하위 함수인 check 함수를 생성합니다.
  
  
• body는 ajax의 data와 같으며, key = value 형태로 넘겨야 합니다.

async function check() {
	// 처리를 위해 필요한 내용 입력
	const checkNo = $('#checkNo').val()
	
	// fetch 사용(비동기 처리)
	const response = await fetch('url', {
		method : 'POST',
		body : "checkNo=" + checkNo, // JSON.stringify를 사용해 변환한 데이터
		headers : {
			"content-type" : "application/x-www-form-unlencoded; charset=UTF-8"
			// 필요에 따라 추가
		}
	})
	
	const responseData = await response.text(); // 또는 response.json();
	
	if(responseData === 'Y') {
		// 정상일 경우
		console.log("Y")
		return true;
	} else {
		// 비정상일 경우
		console.log("N")
		return false;
	}
}

 

---

• 예외처리 시 try catch 문을 이용해 처리합니다.

async function test() {
	try{
		const response = await fetch('url', {
			// setting
		})
		
		const responseData = await response.text();
		if(responseData === 'Y') {
			console.log("Y")
		} else {
			console.log("N")
		}
	} catch(err) {
		console.log("실패 => " + err)
	}
}

 

• 만약 하위 함수인 check()의 값이 비정상이기에 false를 리턴 받으면 save() 함수에서 선언한 check 값은 false가 되어 이후 로직을 처리하지 않도록 처리하였습니다.

---

#. fetch() 사용 방법

 

• fetch api 문서를 이용해 필요한 내용을 아래와 같이 추가하여 사용할 수 있습니다.
  
  
• 자세한 사항은 하단 url을 확인하시어 처리하시길 바랍니다.
  
  

// POST 메서드 구현 예제
async function postData(url = "", data = {}) {
  // 옵션 기본 값은 *로 강조
  const response = await fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE 등
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
  });
  return response.json(); // JSON 응답을 네이티브 JavaScript 객체로 파싱
}

postData("https://example.com/answer", { answer: 42 }).then((data) => {
  console.log(data); // JSON 데이터가 `data.json()` 호출에 의해 파싱됨
});

 

 

===========================================================
틀린 내용이 있거나 이견 있으시면 언제든 가감 없이 말씀 부탁드립니다!

참고 : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
===========================================================