[async await] 비동기함수 in javascript how to use 어떻게 사용하는가 && 개념

자바스크립트에는 동기/비동기 개념이 존재한다.

 

동기 프로그램 :  코드가 짜여진 순서대로 실행하는 일반적인

코드를 의미한다.

비동기프로그램 : Exception처리라던지, 서버로 부터 정보를

받아오는 API프로그램의 경우 비동기적으로 프로그램을

작동시킨다.

 

예)

아래 예시를 보면

 

코드 순서대로 실행하는 동기 프로그램 

console.log("codeBlock1");
console.log("codeBlock2");
console.log("codeBlock3");

 

setTimeout()을 사용한 비동기 프로그램 

자바스크립트는 setTimeout()을 확인한 후

해당 프로그램이 비동기프로그램으로 인식 후

바로 다음 동기 프로그램을 실행한다.

 

console.log("codeBlock 1");
 
setTimeout(()=>{console.log("codeBlock 2")}, 0)
 
console.log("codeBlock 3");

서버로부터 모든 정보파일들을 다 불러와서 실행한다면,

웹 프로그램의 속도가 굉장히 느려질 것이다.

ajax가 등장하면서 서버에서 필요한 정보만 가져오는 것이

가능하진것이 원천적으로 비동기 프로그램 덕분인 것이다.

 

 

 

비동기 함수는 promise를 반환하는 함수다. 

 

async

 

async function f() {
  return 1;
}

function 앞에 있는 async syntax는 다음을 의미한다.

항상 promise를 return한다.

다른 데이터들은 promise에 한번에 보내지게 된다.

 

async syntax가 붙음으로써 비동기 함수의 역할을

하게 되는 것이다.

 

 

 

 

await

await 키워드는 자바스크립트 머신이

promise를 받고 그 결과값을 리턴할 때 까지

기다리게 만든다.

 

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait until the promise resolves (*)

  alert(result); // "done!"
}

f();

 

위 예제에서 

let result = await promise;에서 

promise의 작동이 다 끝날 때 까지 

로직이 일시정지 되는 것을 

알 수 있다.

 

자바스크립트는 함수의 작동을 멈추면서

CPU에 전혀 부담을 주지 않는다. 

함수가 멈추는 순간에 자바스크립트는

EventHandler나 다른 함수를 실행하면

되기 때문이다.

 

 

 

async function showAvatar() {

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

  // read github user
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();

  // show the avatar
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  img.className = "promise-avatar-example";
  document.body.append(img);

  // wait 3 seconds
  await new Promise((resolve, reject) => setTimeout(resolve, 3000));

  img.remove();

  return githubUser;
}

showAvatar();

JSON 데이터셋을 읽어오는 예제를 살펴보자.

json 데이터를 받아오는 2가지의 과정을 

거치고, 

HTML상에서 IMG 태그를 생성하는 작업을

하는 함수다.

 

awiat new Promise 코드에서

3초간 함수작동을 멈추고, 

json 데이터셋이 완성될 때까지

기다리는 작업을 수행한다.

 

3초 후 IMG 태그를 삭제하고,

userData를 반환하고 함수는

종료된다.