Axios 와 XMLHttpRequests.

Axios 와 XMLHttpRequests 가 나온다면 무엇을 의미할까?

XMLHttpRequest

XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용합니다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있습니다.

이름에 XML이 들어가긴 하지만, XMLHttpRequest은 XML 뿐만 아니라 모든 종류의 데이터를 가져올 수 있습니다.

 

이벤트 데이터나 메시지 데이터를 서버에서 가져와야 하는 통신의 경우, EventSource 인터페이스를 통한 서버발 이벤트(Server-sent events)의 사용을 고려하세요. 완전한 양방향 통신의 경우에는 WebSocket이 더 좋은 선택일 수 있습니다.

 

필자가 이것의 쓰임을 처음 목격한 곳:

TypeScript 로 작업 할 당시였다. 올해 여름 경, 자바스크립트를 타입스크립트로 변환하는 작업에 페어 작업을 할 때에는 옆 사람이 이걸 접목한 것을 보며 '왜 저걸 썼을까' 하는 의문을 가질 여유도 없었지만, 마침내 이게 언제 쓰일 수 있는 지 정도는 용도를 스스로 정립 해 볼 수 있는 기회가 왔다.

 

그나저나, XMLHttpRequest 는 어떻게 쓰일까? 

Using XMLHttpRequest - Web APIs | MDN

우선 기억해둬야 할 점:

1. 이것은 "to issue HTTP requests in order to exchange data between the web site and a server." 이다. 

2. To send an HTTP request, create an XMLHttpRequest object, open a URL, and send the request. After the transaction completes, the object will contain useful information such as the response body and the HTTP status of the result.

function reqListener() {
  console.log(this.responseText);
}

const req = new XMLHttpRequest();
req.addEventListener("load", reqListener);
req.open("GET", "http://www.example.org/example.txt");
req.send();

유형(Types)별 상세 예시는 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#types_of_requests 를 참고 해 보길.

 

Axios 로 돌아와보겠다.

"Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다."

 

특징으로는:

• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

한마디로 fetch 를 위한 구성의 번거로움을 해결하기 좋은게 axios.

 

사용법은?

https://axios-http.com/kr/docs/example

기본 예제 | Axios Docs

아니, 이거 말고요! 그거...axios 호출하고 적는 그 다음에 그거 있잖아요!

요청 method 명령어 말이군요? 그건 여기에 있습니다.

https://axios-http.com/kr/docs/api_intro

Axios API | Axios Docs

음음! 그래요...하지만 좀 감이 안오는데. 제가 하려는 건 rest api 와 interaction 을 하는 거라구요!

Axios tutorial - GET/POST requests in JavaScript with Axios

이 곳의 예시가 가장 마음에 들었습니다.

 

흑흑, 그치만 어떻게 할 지 아직 감이 잘 안오는데요?

걱정마세요. 아무래도 당신은 지금 기존의 코드에서 axios 를 도입 해서 변환하려는 거군요?

일단 아래를 먼저 참고 후, 제가 변환해서 구동 점검 까지 한 코드를 공유 해 보겠습니다.

Axios 다양하게 활용하기: async/await사용 - Third9's Lounge

[axios] async, await, 전송 방식 (GET, POST, PUT, DELETE)

Minimal Example | Axios Docs

우선 첫 시도입니다.

// before
const fetchPlanets = async () => {
  const res = await fetch("http://swapi.dev/api/planets/");
  return res.json();
};

// after
const fetchPlanets = async () => {
  const res = await axios
    .get("http://swapi.dev/api/planets/")
    .then((respond) => {
      respond.data;
    });
};

 

(당시 얼마나 머리가 아팠는지, 변수명과 일치시키지 않은 실수가 보입니다). 

여기서 놓친 실수가 있다면:

- respond.data 를 return 해야하는 점.

- axios response 전체를 return 해야하는 점.

 

기존의 fetch 방식이 변수를 하나 생성해서 fetch 하는 요소와 url를 지정한 후에 이를 json 쪽으로 넘겨주는 형식이었다면.

axios 에서는 이러한 json 처리를 해주므로 아래와 같이 처리 해 주면 정상 적으로 서버에서 데이터를 받아오는 모습을 확인 할 수 있었습니다. 

// Before
const fetchPlanets = async () => {
   const res = await fetch("http://swapi.dev/api/planets/");
   return res.json();
};

//After
const fetchPlanets = async () => {
  return await axios.get("http://swapi.dev/api/planets/").then((respond) => {
    return respond.data;
  });
};

결과과.

초기 구동 작업 시, useState 와 useEffect 로 하나하나 구성 하는 번거로움이 줄어들었습니다.