[JS] Ajax와 Axios

Ajax

Ajax는 Asynchronous Javascript and XML의 약자로서 비동기적으로 자바스크립트를 이용해 서버와 통신하는 방법을 말한다. 다만 이름과 다르게 초기에는 XML을 많이 썼지만, 지금은 JSON이 더 많이 사용된다.

비동기와 동기

비동기란 프로그램의 실행이 순차적이지 않아서, 특정 작업이 완료될 때까지 기다리지 않고 다른 작업을 동시에 진행할 수 있다는 뜻이다. 예를 들어, 비동기 함수 호출은 호출 즉시 다음 코드가 실행되며, 호출된 함수는 나중에 결과를 반환하게 된다.

반면 동기란 프로그램의 실행 순서가 순차적이어서, 특정 작업이 완료되기 전까지는 다른 작업을 시작할 수 없다는 뜻이다. 동기 함수 호출은 호출된 함수가 완료되기 전까지 다음 코드가 실행되지 않는다.

AJAX에서는 비동기적 실행을 통해, 사용자가 웹 페이지 전체를 새로 고침하지 않고도 서버와 통신하여 필요한 데이터만 받아와서 화면의 일부를 업데이트할 수 있다. 비동기 요청이므로, 서버로부터 응답을 기다리는 동안에도 이용자는 페이지의 다른 부분을 계속 사용할 수 있다.

하지만 만약 AJAX 요청이 비동기가 아니라 동기였다면 페이지 전체가 새로고침되는 건 물론이고, 요청이 응답되고 순차적으로 처리될 때까지 웹 페이지가 멈춰서, 페이지의 다른 작업을 수행할 수 없을 것이다.

XMLHttpRequest(XHR)

XHR은 웹 브라우저가 제공하는 객체로서, 서버와 통신할 때 HTTP 요청을 수행할 수 있다. 즉, HTTP 요청 메시지를 생성하고 전송할 수 있다. Ajax를 사용하면 XHR을 통해 페이지를 새로 고침하지 않아도 데이터 가져올 수 있다.

Axios

Axios는 JS에서 사용하는 Promise 기반의 HTTP 클라이언트 라이브러리다. HTTP 클라이언트 라이브러리란, 애플리케이션이 HTTP 프로토콜을 통해 다른 서버와 통신할 수 있도록 돕는 도구이며 Promise는 JS에서 비동기 작업을 처리하기 위한 객체다.

서버와 클라이언트가 통신할 때, 서버가 JSON으로 응답 데이터를 보내면, Axios는 Promise라는 객체로 바꿔준다. 그리고 Promise 객체 안에는 비동기 작업의 성공이나 실패와 관련된 결과가 들어있다.

Axios 사용

Axios를 사용하기 위해 먼저 Axios 공식 문서를 확인해보자.

다양한 방법으로 사용할 수 있지만, CDN 방식이 사용하기 편한 것 같다.

axios({
  method: 'get',
  url: 'url주소'
})

이렇게 aixos 함수를 사용하면, 해당 HTTP method는 GET으로, url은 ‘url주소’로 HTTP 요청을 보내게 된다.

그러면 해당 URL 주소의 서버로부터 응답 데이터를 Promise 객체로 받게 된다. 즉, axios함수는 Promise 객체를 반환하게 된다.

then & catch

axios함수를 통해 Promise객체를 반환 받으면, Promise의 메서드인 then과 catch를 이용해 콜백함수를 호출하여 추가 작업을 할 수 있다.

axios({
  method: 'get', // HTTP method 중 GET으로 요청 보냄
  url: 'https://www.example.com/example' // 요청을 보낼 URL
}) // Promise 객체가 반환됨
.then((response) => {   // axios요청이 성공하면 실행될 then 메서드
  console.log(response) // response에는 서버로부터의 응답데이터가 담김.
})
.catch((error) => { // axios요청이 실패하면 실행될 catch 메서드
  console.log(error) // error에는 발생 오류가 담김
})

then 메서드를 먼저 보자. then메서드는 axios 요청이 성공하면 실행되는 메서드다. 그리고 then 메서드의 인자는 앞 작업의 성공 결과를 인자로 전달 받게 된다.

반면에 catch 메서드는 axios 요청이 실패하거나 then 메서드 내부에서 오류가 발생할 때 실행되는 메서드다. 실패 결과나 오류 정보를 인자로 전달 받게 된다.

chaining

then 메서드에서 return을 통해 새로운 Promise 객체를 반환할 수 있다. 따라서 then 메서드 뒤에 또 then 메서드를 연쇄적으로 작성할 수 있는데 이를 chaining이라고 한다. 비동기 작업임에도 chaining을 통해 호출 순서를 보장할 수 있다.

axios({
  method: 'get',
  url: '대충url주소'
})
.then((response1) => {
  return response2
})
.then((response2) => {
  return response3
})
.then((response3) => {
  return response4
})
.catch((error) => {
  //error 처리
})

각 then 메서드는 이전 then 메서드의 반환 값을 인자로 받아 chaining을 이어갈 수 있다. 이때 오류가 발생하면 catch 메서드가 실행된다.

정리

정리해보자. Ajax는 비동기적으로 서버와 데이터를 주고 받는 방법론을 의미한다.

Ajax를 구현하기 위해 브라우저가 제공하는 내장 객체가 XHR이다. XHR은 HTTP 요청을 생성하고 서버와 통신을 가능하게 한다.

Axios는 XHR을 보다 쉽게 사용하고 추가 기능도 제공하는 HTTP 클라이언트 라이브러리다. XHR의 복잡한 부분을 Promis 기반의 간단한 인터페이스를 제공한다.