비동기 통신, 동기 통신의 차이점이 무엇인가요??

Question

비동기 통신, 동기 통신의 차이점이 무엇인가요??응답이 올때까지 기다린다? 뭐 이런차이라고 대충 알고있는데정확하게 차이점과 어떨때 각자 사용하는것이 맞는지 궁금합니다^^

프알못 · Accepted Answer

일반적인 비동기 XHR 코드를 먼저 보겠습니다. (Promise나 async/await 등은 다루지 않겠습니다.)let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://www.a-ha.io/404', true); // async = true

xhr.send();

xhr.onload = function() {
  // ----- 응답을 받고 실행될 코드 시작
  if (xhr.status != 200) {
    alert('오류가 발생했습니다.');
  } else {
    alert(xhr.responseText);
  }
  // ----- 응답을 받고 실행될 코드 끝
};

xhr.onerror = function() {
  alert('요청을 실패했습니다.');
};

// ---------- 그냥 아무 코드

alert('이 메시지가 언제 보일까요?');응답을 받고 실행될 코드 부분이 응답이 올 때까지 기다린 후 실행되긴 합니다.아래는 웹 워커가 아닌 이상 실제로 사용하지는 않는 동기 XHR입니다.let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://www.a-ha.io/404', false); // async = false

try {
  xhr.send();
  // ----- 응답을 받고 실행될 코드 시작
  if (xhr.status != 200) {
    alert('오류가 발생했습니다.');
  } else {
    alert(xhr.responseText);
  }
  // ----- 응답을 받고 실행될 코드 끝
} catch(err) {
  alert('요청을 실패했습니다.');
}

// ---------- 그냥 아무 코드

alert('이 메시지가 언제 보일까요?');응답을 받고 실행될 코드 부분이 응답이 올 때까지 기다린 후 실행된다는 점도 같습니다.동기식이면 콜백을 사용하지 않아도 됩니다. 콜백지옥에 빠질 일이 없습니다!그런데 위 두 코드를 실행해보면 이 메시지가 언제 보일까요? 메시지가 나타나는 시점이 다릅니다.동기 XHR은 응답을 기다리는 동안 실행이 멈춥니다. 심지어 화면 업데이트도 이루어지지 않습니다.비동기 XHR은 응답이 올 때까지 기다리지 않고 다음 코드를 실행하고, 완료됐을 때 콜백을 실행합니다.동기 통신은 직관적입니다. 콜백 지옥에 빠질 일도 없습니다. 하지만 다른 코드의 실행이 멈춥니다.응답을 기다리는 동안 (해당 스레드에서) 할 게 없거나 늦어도 되는 경우에 동기 통신을 씁니다.화면 업데이트 등의 다른 작업을 다른 스레드에서 처리해서 정말로 할 게 없을 때나 쓸 수 있습니다.비동기 통신을 써야 같은 스레드에서 여러 작업을 하는 동안 다른 작업이 멈추지 않습니다.콜백 때문에 가독성이 떨어지기도 합니다. 콜백 안에 콜백 안에 콜백 안에 콜백 안에 콜백...하지만 (극한의 최적화가 필요한 게 아닌 이상) Promise, async/await 등을 쓰면 될 문제입니다.

생활꿀팁

생활꿀팁

비동기 통신, 동기 통신의 차이점이 무엇인가요??