[JavaScript] 동기와 비동기 방식

이번에 진행하는 프로젝트에서 ajax를 사용하여 JavaScript에서의 동기과 비동기에 대한 내용을 조사했다.

 

JS는 대부분 비동기식 절차

 

비동기 방식을 사용 시 데이터가 아직 도착하지 못했는데 화면에 출력하여 오류 발생할 수 있거나 데이터를 DB에 insert하는 동작을 수행 시 아직 데이터를 넘겨받지 못했는데 insert를 수행하여 데이터가 온전하게 insert되지 않을 수 있다.
그래서 다음과 같은 방법으로 동기절차 형식을 구현하여 사용한다.  
1)콜백함수 사용
function getData(cb) {
  $.get('https://domain.com/products/1', function(res) {
    cb(res);
  });
}

getData(function(tableData) {
  console.log(tableData);
});

 

하지만 과도한 콜백사용으로 콜백지옥 현상이 발생할 수 있다.

 -> 단점 코드의 가독성이 떨어지며 로직변경에 어려움이 있다.

콜백지옥 해결
-Promise 

function getData(cb) {
  return new Promise(function(resolve, reject) {
    $.get('url/products/1', function(res) {
      resolve(res);
    });
  });
}

//getData()의 실행이 끝나면 then을 호출된다.
getData().then(function(tableData) { // then에 resolve();된 값이 전달된다.
  console.log(tableData);
});

- async / await
콜백과 프로미스의 단점을 보완하고, 코드를 더 읽기 좋게 만들어준다.

async function f() {

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

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

함수 호출 후 본문이 실행 되는 도중에 (*)절에서 실행이 '중단'되었다가 promise가 처리되면 실행되며 동기 방식으로 처리 되며, 이때 promise객체의 result 값이 변수 result에 할당된다. alert(result);는 '완료!'가 출력된다.