[WebProgramming] 동기 처리와 비동기 처리

안녕하세요, 피터팬입니다!

오늘은 동기 처리와 비동기 처리에 대해 알아볼건데요!

https://peter-coding.tistory.com/264

[React] fetch를 통해 HTTP 요청 보내기

위 fetch글에서, async와 await를 이용해 fetch(비동기 함수)를 동기 처리하도록 바꾸었는데요.

그럼 동기 처리와 비동기 처리가 무엇일까요?

• 동기 처리 ; 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있음
• 비동기 처리 ; 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있음 ex) setTimeout( ), fetch( )

+ promise ; JS 비동기 처리에 사용되는 객체. 데이터를 모두 받아오기 전에 웹에 출력하는 오류 방지

promise기반의 JS를 동기처리 하는 법 ; async()

async function f(){
	return 1;
}

 

await는 Promise가 처리될 때까지 함수 실행을 기다리게 만듭니다.

 

setTimeout()은 기본적으로 함수가 처리되는 동안 다른 함수를 실행하는 비동기함수입니다.

그런데, 우리가 원하는 setTimeout()의 기능은 시간을 기다리는 것으로 처리되는 동안 다른 함수를 실행하지 않는 동기 처리를 원하겠죠?
그래서 async와 await를 이용하여 동기 처리할 수 있도록 변환해주는 것입니다.

const func = () => {
    setTimeout(() => {
    	console.log("Hello");
    }, 1000);
}
func();

const func = async () => {
	for (let i = 0; i < 5; i++) {
    	console.log("Hello");
    	await new Promise((resolve) => setTimeout(resolve, 1000));
	}
};
func();

위의 식과 아래 식의 차이가 보이시나요?

아래 식은 async를 함수에 붙혀주었고, await와 new Promise로 동기처리를 해주었습니다.

위의 식은 실행 후 1초 후 Hello 5개가 한번에 찍히지만, 아래 식은 실행 후 1초 간격으로 Hello가 5번 찍힐 것입니다.

 

 

async와 await를 사용한 예시

async function showAvatar() {

  // JSON 읽기
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();

  // github 사용자 정보 읽기
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();

  // 아바타 보여주기
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  img.className = "promise-avatar-example";
  document.body.append(img);

  // 3초 대기
  await new Promise((resolve, reject) => setTimeout(resolve, 3000));

  img.remove();

  return githubUser;
}

showAvatar();

결과 ; await new Promise()문을 실행하고 3초를 기다리고 img.remove()문을 실행함

 

 

 

---

Reference

https://ko.javascript.info/async-await

async와 await