패스트캠퍼스 챌린지 22일차

XHR to Fetch & Promise

 

지금까지 작성한 모든 소스코드는 동기적 방식으로 작성했다. 현재 해커뉴스 클라이언트의 API를 통해서 json형태의 데이터를 받아온다. 

 

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

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

 

Api 클래스의 getRequest 메서드는 XHR 형태로 데이터를 받아오지만 동기적으로 받아온다. 그렇다는 것은 데이터의 양이 많거나 서버의 통신이 조금 느릴 때, 해당 작업을 처리하는 시간동안 만들어놓은 시스템이 잠시 멈추는 듯한 느낌을 받을 수 있고 실제로 그 처리 작업을 하는 동안 그 뒤의 작업은 수행하지 못함으로 화면의 처리가 유동적이지 못하게 느낄 수 있다.

 

하여 기존의 방식을 비동기 형식으로 수정할 것이다.

export default class Api{
  
  ...
  
  getRequestWithXHR<AjaxResponse>(cb: (data: AjaxResponse) => void): void {
    this.xhr.open('GET', this.url);
    this.xhr.addEventListener('load', () => {
      cb(JSON.parse(this.xhr.response) as AjaxResponse);
    });

    this.xhr.send();
  }

  getRequestWithPromise<AjaxResponse>(cb: (data: AjaxResponse) => void): void {
    fetch(this.url)
      .then(response => response.json())
      .then(cb)
      .catch(() => {
        console.error('데이타를 불러오지 못했습니다.');
      });
  }
  
  ...
}

 

위 방식은 기존의 동기적인 XHR 형식에서 비동기적인 XHR 형식으로 전환한 것과 Promise를 반환하는 패턴인 fetch Api를 사용했다. XHR 형식은 비동기적 처리를 할 때, return을 반환할 수 없으므로 ( return이 반환 되었을 시에 이미 send를 통해 작업이 끝남, 처리 순서가 뒤바뀜) callback 함수를 통하여 해당 작업이 끝났을 시에 작동하도록 처리 결과를 넘겨주었다.

 

fetch 형식은 Promise를 반환하며, Promise는 하나의 디자인패턴으로, 비동기처리를 위한 콜백 함수를 사용할때, 콜백 함수의 가시적인 면에서 이점이 있으며, json의 데이터를 object 형태로 변환하는 과정 등의 처리에 있어 이점이 있다.

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential