비동기 - Async/Await

비동기 처리

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

동기: 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행 - 은행원
비동기: 요청을 보낸 후 응답에 관계 없이 다음 동작을 실행 - 짜장면 배달원

비동기 예제
자바스크립트의 내장 함수인 setTimeout()이 있다.

setTimeout()

function getData() {
  let data;

  setTimeout(function () {
    data = 'result';
  }, 1000);

  return data;
}

setTimeout()은 1초 뒤에 data변수에 result값을 할당하도록 되어있다.

비동기 처리 방식의 문제 해결
위와 같은 문제점들은 콜백 패턴으로 처리가 가능하다.

function getData(callback) {
  let data;

  setTimeout(function () {
    data = 'result';
    callback(data);
  }, 1000);
}

getData(function (data) {
  console.log(data); // result
});

함수를 실행할 때 인자값으로 콜백 함수를 넣는 것이다. getData()의 인자값으로 콜백 함수가 들어갔고, setTimeout()이 1초뒤 실행되고 결과값을 콜백 함수의 인자값으로 넣어 호출하였다. 이렇게 콜백 패턴을 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행 시킬 수 있다.

콜백 지옥

콜백 패턴를 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 중첩되어 복잡도가 높아지는 콜백 함수가 발생하는 단점이 있다.

step1(function (value1) {
  step2(function (value2) {
    step3(function (value3) {
      step4(function (value4) {
        step5(function (value5) {
          // 탈출
        });
      });
    });
  });
});

step1에서 어떤 처리 (주로 입출력) 이후 그 결과를 받아와, 인자로 전달된 익명 함수의 매개변수로 넘겨준다. 이후 step2에서 또 어떤 처리를 하고, 다음 익명 함수가 실행된다. 이를 반복하다보면 코드가 위에서 아래가 아니라 기묘한 피라미드 모양으로 기술되게 된다. 이러한 콜백 지옥은 가독성을 나쁘게 하며 실수를 유발하는 원인이 된다.

콜백 지옥 해결 방법 => 1. promise 2.Async/Await
Es7 이후에 Async/Await이 보다 편함.

async function myFunc() {
	return "프라미스를 반환!"; 
myFunc().then(result => {console.log(result)});

await은 async 함수 안에서만 동작함.

async function myFunc(){
	let promise = new Promise((resolve, reject) => {
		setTimeout(() => resolve("완료!"), 1000);
	});

    console.log(promise);

	let result = await promise; // 여기서 기다리자!하고 신호를 줍니다.

    console.log(promise);

	console.log(result); 
}