[비동기]

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미

• 비동기는 논블락킹(non-blocking)이다

  • blocking : 하던일을 멈추고 요청에 대한 결과가 동시에 발생된다.

  • non-blocking : 요청에 대한 결과가 동시에 일어나지 않아서 여러가지 일을 한번에 처리가 가능하다.

• 비동기 함수 전달 패턴 : callback패턴, 이벤트 등록 패턴

주요사례

1. DOM Element의 이벤트 핸들러

   • onload : 문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생

   • DOMContentLoaded : HTML과 script가 로드된 시점에 발생하는 이벤트(빠른 실행속도가 필요할때 적합)

2. 타이머

   • 타이머 API(setTimeout 등)

   • 애니메이션 API (requestAnimationFrame)

3. 서버에 자원 요청 및 응답

   • fetch API

   • AJAX : 웹브라우저와 웹서버가 내부적으로 데이터 통신을 해서 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다

async & await

async function 함수명() {
  await 비동기_처리_메서드_명();
}

• 자바스크립트의 비동기 처리 코드는 콜백을 사용해야지 코드의 실행 순서를 보장받을 수 있다. 이 콜백을 사용하지 않고 코드를 작성하고 싶다면 async & await를 붙이면 된다.

function logName() {
  var user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

• 위의 함수는 코드의 실행순서를 보장받을 수 없다.

function logName() {
  // 아래의 user 변수는 위의 코드와 비교하기 위해 일부러 남겨놓았습니다.
  var user = fetchUser('domain.com/users/1', function(user) {
    if (user.id === 1) {
      console.log(user.name);
    }
  });
}

• 위와 같이 콜백을 사용해야 실행 순서를 보장받을 수 있다.

// async & await 적용 후
async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

출처 : https://joshua1988.github.io/web-development/javascript/js-async-await/#async--await%EB%8A%94-%EB%AD%94%EA%B0%80%EC%9A%94