뭐 콜백헬을 해결한다... setTimeOut을 이용한 해결... 미래의 약속 등등 다른 포스팅에서 너무 많이 다뤄서 자세한건 안다루겠습니다.(MDN, 모던 자바스크립트, poiema, 제로초, 캡틴판교등등 이분들이 더 설명 잘합니다.) 이 글에선 자바스크립트 비동기의 3가지 해결의 차이점을 보여드리겠습니다.

1. Callback(콜백)

var URL = "https://jsonplaceholder.typicode.com/posts"

function imgLoad(url, callBack) {
  var request = new XMLHttpRequest();
  request.open('GET', url);
  request.onload = function () {
    if (request.status === 200) {
      var data = JSON.parse(request.response);
      callBack(data)
    }
  }
  request.send();
};

function imgLoadCB01(data, callBack){
  var num = data[0];
  callBack(num)
}

function imgLoadCB02(data, callBack){
  var title = data.title;
  callBack(title)
}

imgLoad(URL, function (data) {
  imgLoadCB01(data, function(data){
    imgLoadCB02(data, function(data){
      console.log(data)//원하는 결과
    })
  })
})

jsonplaceholder사이트에서 Json데이터를 가져와서 3단계 공정을 거쳐 원하는 데이터를 가져오는 Ajax함수를 만들었습니다. 원하는 데이터를 가져오려면 3단 공정을 거쳐야합니다.

imgLoad : 원하는 데이터를 GET해와서 콜백함수에 전달합니다.

첫번째 콜백 imgLoadCB01 : 전달받은 데이터에서 0번째 순서 데이터를 콜백함수에 전달합니다.

두번째 콜백 imgLoadCB02 : 전달받은 데이터에서 원하는 프로퍼티값을 console출력합니다.

전통적인 콜백함수를 이용한 비동기처리입니다. 지금은 3단계로 거쳤지만 만약 더 복잡한 데이터 처리과정이라면 콜백이 10개가 넘을 수도 있습니다! 콜백헬이 발생할 수도 있죠

굳이 콜백을 쓰지않아도 원하는 데이터를 뽑는 여러 방법이 있지만 가장 전통적이고 객체지향적인 방법입니다.

2. Promise

const URL = "https://jsonplaceholder.typicode.com/posts"

function imgLoadProm(url) {
    return new Promise((res, rej) => {
        var request = new XMLHttpRequest();
        request.open('GET', url);
        request.onload = () => {
            if (request.status === 200) {
                var data = JSON.parse(request.response);
                res(data);
            }
        }
        request.send();
    });
};

imgLoadProm(URL)
.then((res) => res[0])
.then((res) => res.title)
.then((res) => console.log(res))

imgLoadProm : 원하는 데이터를 GET해와서 resolve함수에 전달합니다.

then : then체이닝을 이용하여 원하는 데이터를 출력합니다.

한눈에 봐도 훨씬 시원하게 코드가 바뀌었습니다ㅠ

3. async/await

const URL = "https://jsonplaceholder.typicode.com/posts"

function imgLoadProm(url) {
    return new Promise((res, rej) => {
        var request = new XMLHttpRequest();
        request.open('GET', url);
        request.onload = () => {
            if (request.status === 200) {
                var data = JSON.parse(request.response);
                res(data);
            }
        }
        request.send();
    });
};

async function finish(){
    const one = await imgLoadProm(URL);
    const two = one[0];
    const three = two.title;
    console.log(three)
}
finish()

프라미스 패턴과 가장 많이 다른점은 일반 동기 함수 패턴과 매우 흡사하다는 것입니다.
비동기를 처리할 함수 앞에 async를 붙이고 함수 내부에 있는 비동기 함수앞에 await만 붙이면 자동으로 비동기의 결과값을 자연스럽게 처리가 가능합니다!