AJAX 활용

AJAX(Asynchronous JavaScript and XML)

비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법. (https://ko.wikipedia.org/wiki/Ajax) 특정 기술을 의미하는 것이 아니라 비동기적인 처리를 통해 페이지를 새로 불러올 필요 없이 불러온 페이지 내에서 서버와의 통신을 주고받는 기법이라고 할 수 있다.

---

Axios

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.(https://axios-http.com/kr/docs/intro)

서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다.

즉, AJAX 기법을 사용하는데 유용한 도움을 주는 라이브러리임.

일반 fetch() method를 통해 get을 처리하기 위해서는 1.서버에 요청을 보내고, 2.결과를 받아 json으로 변환하고, 3.변환한 json을 array/object 등으로 변환하여 사용해야 한다. 이런 처리를 axios의 get() method 호출로 간편히 처리할 수 있다.

 

Axios 설치

npm install axios

JS파일 import

import axios from 'axios';

사용법(get, https://axios-http.com/kr/docs/res_schema)

axios.get(url)
  .then((result) => {
    // result.data를 통해 url을 통해 받은 data에 접근할 수 있다.
    ...
  })
  .catch(() => {
    ...
  })

여러번의 get 요청을 한 번에 해야하는 경우

Promise.all([ axios.get(...), axios.get(...) ])
  .then( ... )

사용법(post)

axios.post(url, post_object);