자바스크립트 비동기 [1] – AJAX와 API

Synchronous와 Asynchronous

• 동기 방식으로 작동하는 코드는 line by line으로 실행되며, 모든 라인의 코드는 이전 라인 코드의 작업이 완전히 끝날 때까지 대기한다.
• 비동기 방식으로 작동하는 코드는 이전 라인 코드의 작업이 완전히 끝나지 않더라도 다음 라인의 코드가 바로 실행되며, 끝나지 않은 작업은 백그라운드에서 계속 실행된다.
• 자바스크립트에서 콜백 함수의 방식은 비동기 방식이며, 비동기는 non-blocking이라고 표현하기도 한다.

AJAX와 API

• AJAX(Asynchronous Javascript And XML)는 웹서버와 비동기로 통신할 수 있도록 하는 기술이다. AJAX 호출을 통해 웹서버로부터 다이나믹하게 데이터를 요청할 수 있다.
• API(Application Programming Interface)는 애플리케이션끼리 통신하기 위한 소프트웨어를 말한다. 자바스크립트에서는 DOM API, Geolocation API 등이 자주 쓰이는 API 중 하나이다.
• Online API는 웹 서버에서 동작하고 있는 API를 의미하며, 데이터 요청을 받아서 응답으로 제공하는 역할을 한다. 자바스크립트를 이용해서 웹 API를 구현하려면 보통 node.js를 사용하게 된다.
• AJAX가 처음 등장할 때는 데이터를 XML 형식으로 주고받는 것이 일반적이었으나, 이제는 JSON으로 주고받는 것이 일반적이다.

XMLHttpRequest

const getCountryData = function (country) {
  const request = new XMLHttpRequest();
  request.open('GET', `https://restcountries.com/v3.1/name/${country}`);
  request.send();

  request.addEventListener('load', function () {
    const [data] = JSON.parse(this.responseText);
    console.log(data);
  });
};

getCountryData('portugal');
getCountryData('usa');
getCountryData('germany');

• XMLHttpRequest은 비동기로 동작하므로 데이터가 찍히는 순서가 조금씩 다를 수 있다.

Callback Hell

const getCountryAndNeighbour = function (country) {
  // AJAX call country 1
  const request = new XMLHttpRequest();
  request.open('GET', `https://restcountries.com/v3.1/name/${country}`);
  request.send();

  request.addEventListener('load', function () {
    const [data] = JSON.parse(this.responseText);
    console.log(data);

    // Get neighbour country (2)
    const [neighbour] = data.borders;

    if (!neighbour) return;

    // AJAX call country 2
    const request2 = new XMLHttpRequest();
    request2.open('GET', `https://restcountries.com/v3.1/alpha/${neighbour}`);
    request2.send();

    request2.addEventListener('load', function () {
      const data2 = JSON.parse(this.responseText);
      console.log(data2);
    });
  });
};

getCountryAndNeighbour('usa');

• 비동기 방식으로 동작하는 함수를 정해진 순서대로 진행하고 싶을 때(request -> request2), request의 콜백함수 안에서 request2를 호출해준다.

setTimeout(() => {
  console.log('1 second passed');
  setTimeout(() => {
    console.log('2 seconds passed');
    setTimeout(() => {
      console.log('3 second passed');
      setTimeout(() => {
        console.log('4 second passed');
      }, 1000);
    }, 1000);
  }, 1000);
}, 1000);

• 비동기로 동작하는 setTimeout 함수 역시 콜백 함수 안에 넣어주면 순서대로 동작한다.