JS 비동기화, 콜백함수 콜백헬 Promise, Fetch API로 해결하기

---

배경지식

XHR : XML HTTP REQUEST

Fetch : XHR를 보완하는 API, 최신버전 모던 브라우저에서 지원, promise 기반의 API

 

기존 XHR에서 콜백의 depth 가 여러개 API가 추가될때마다 깊이가 깊어졌다면 Fetch에서는 Promise 객체를 리턴해서 promise가 제공하는 메소드에 기존의 API를 연결하면서 하나로, 일자로 쭉 펼칠 수 있다.

 

 

---

비동기화 필요성, 코드 예시, 기타 설명

 

동기화를 사용하면, API를 받을때까지 프로그램이 작동하지 않아서 UI가 멈추는 현상이 발생한다.

 

예시)

옵션을 통해 동기로 진행되는 코드

  getRequest<AjaxResponse>(): AjaxResponse {
    this.ajax.open('GET', this.url, false);
    this.ajax.send();

    return JSON.parse(this.ajax.response) as AjaxResponse;
  }
}

 

API를 여러개 받는다면 비동기로 코드 작성하는 것이 유용하다.

비동기로 코드를 작성하려면 EVENT 시스템과 => arrow 함수(콜백함수)를 사용한다.

Api를 받는 함수는 콜백함수를 인자로 받고, 데이터타입과 값 모두 void로 처리한다.

ajax에 .addEventListener('이벤트명', () => {콜백함수에 인자로 json 파싱넣기});

 

예시)

  getRequest<AjaxResponse>(): AjaxResponse {
    this.ajax.open('GET', this.url, false);
    this.ajax.addEventListener('load',()=>{
      cb(JSON.parse(this.ajax.response)as AjaxResponse);
    });
    this.ajax.send();
  }

 

api가 활용되는 newsfeed, newsdetail 부분에도 마찬가지로 콜백함수를 받는다.

 

콜백함수 인자로 받기 전 (왼쪽), 후 (오른쪽)

동일 데이터를 활용하는 부분들도 모두 콜백함수로 바꿔준다.

 

NewsFeed 만들때

수정 전 (왼쪽), 후 (오른쪽)

이때, API가 여러개 필요하면 호출되는 API의 개수가 많아질수록 콜백이 반복되면서 구조가 복잡해진다. 

이를 위해 Promise를 사용한다.

 

NewsDetail 만들때

생성자가 호출되고, API를 받고, 라우터가 render를 호출하는 구조이다. 이때 ( 첫 프로그램의 시행일 경우 등 )데이터가 없는 상황, 그래서 다시 api 받았는데 이전 생성자 호출이 이제서야 완료된 경우 등이 발생할 우려가 있다.

 

또, HTML을 생성하는 코드도 데이터가 없으면 (응답 아직 없으면) 작동되지 않고 콜백함수 안에 넣으면 페이징을 할 때 API 받는 과정이 필요없다는 문제가 있다. 그래서 UI를 업데이트 하는 아래쪽 코드를 별도의 함수로 분리해야 한다.

수정 전 (왼), 후 (오른)

---

 

한편, json의 파싱이 가진 단점은 동기적으로 작동한다는 것이다. (즉 API 많아지면 UI 멈춤)

응답값에 json 받아서 호출하고 콜백함수를 호출하면 비동기적으로 코드를 짤 수 있다.

 

예시 (에러처리 포함)

fetch 전 (왼), 후 (오른)

이를 사용하는 request 도 수정해준다.

사용하는 쪽에서는 그냥 getData로 받던 코드를 getDataWithPromise로 수정해주면 끝난다. Newsfeed와 newsdetail 부분에서 단순히 WithPromise 부분만 추가하면 된다.

---

결론 요약

 

API를 여러개 받을 때는 동기화된 코드에서 UI가 멈춤 현상이 있을 수 있으므로, 비동기화를 사용한다. 코드를 비동기화할때는 콜백함수를 이용하나, API가 많아질수록 콜백이 콜백에 콜백으로 이어지는 콜백헬이 발생하므로 이를 해결하기 위해 Promise 기반의 Fetch API를 사용한다.