Today I Learned

오늘은(어제는) fetch api를 이용하여 AJAX 통신하는 과정에 대해 공부했다.

fetch API

fetch API를 이용하면 Request나 Response같은 HTTP 파이프라인을 구성하는 요소를 조작하는 것이 가능하다.

fetch API 사용법

const request = (url: string) => {
  return fetch(url)
    .then((response) => response.json())
    .then((data) => {
    // 데이터 처리
    return data; // promise 객체
  })
  .catch((error) => {
    console.log(error.messages);
  }
}

fetch API는 프로미스 체인으로 구성되어 있어 가독성이 높고 손 쉽게 AJAX 통신이 가능하다. 그리고, 프로미스 특성상 async/await 예약어로 동기적으로 작성할 수도 있다.
단, 서버와의 통신이 400번대, 500번대 에러(서버와 통신이 제대로 되지 않았음에도) 에러가 발생하지 않으므로, status 코드로 나누어 에러를 반환하도록 설정해야 한다.

axios 라이브러리를 사용하면 따로 관리해줄 필요 없이 interceptor만 설정해주면 된다.

참고. 이전의 XMLHttpRequest

XMLHttpRequest는 이벤트를 바탕으로 AJAX 통신을 하였고, 성공과 실패 콜백함수를 입력받아 각 경우를 나눠서 실행했었다.

function request(url: string, onFulfilled: Function, onRejected: Function) {
  const xhr = new XMLHttpRequest();
  xhr.addEventListener("load", (e) => {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        // fulfilled
        onFulfilled(JSON.parse(xhr.responseText));
      } else {
        onRejected(xhr.statusText);
      }
    }
  });
  xhr.addEventListener("error", (e) => {
    onRejected(xhr.statusText);
  });
  xhr.open("GET", url);
  xhr.send();
}

export { request };

비동기 작업이 많이 중첩될수록 관리가 어려워진다.

마치며

주로 프로젝트를 만들 때 axios를 사용하였으므로 평소에 쓸 일이 거의 없었고, 앞으로도 쓸일이 있을까...?