AJAX (Asynchronous JavaScript and XML)

동적 웹 사이트를 만들기 위해서는 비동기적으로 서버의 request를 보내고 response를 받아와야 한다. AJAX는 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. (요즘은 XML보다는 JSON을 주로 사용한다.)
AJAX를 구현하기 위해서 브라우저의 XMLHttpRequest를 이용해 전체 페이지를 새로 가져오지 않고도 페이지 일부만을 변경할 수 있도록 javascript를 실행해 서버에 데이터만을 별도로 요청하여 구현하였다. 다만 이 방법은 문법이 복잡하고 직관적이지 않다는 단점이 있다. 그래서 요즘은 fetch 함수 또는 axios 라이브러리를 사용하여 AJAX를 구현한다.

fetch

ES6 표준에 소개된 문법으로 Promise 기반으로 쉽게 request를 보낼 수 있다. JavaScript 내장 라이브러리이다.

네트워크 에러 발생 시 reponse timeout이 없어 기다려야 하고, JSON변환과 문자열변환 과정이 별도로 필요하다는 단점을 가진다.

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다. Promise와 관련된 내용은 이전 게시글에서 다루었다.

options 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있다. response 객체로 부터는 HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있다.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => console.log(data));

method가 없을 경우, 디폴트인 GET으로 설정된다.

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
}).then((response) => console.log(response));

POST 형식으로 전달할 경우에는 method를 "POST"로 설정해주고, headers 옵션을 통해 JSON 포맷을 사용한다고 알려줘야 하며 body를 추가해준다. 데이터를 json 형식으로 바꿔주기 위해 JSON.stringify()를 사용해준다.

request 오류는 다음과 같은 상황에 발생한다.

URL이 이상하거나 헤더 정보가 이상해서 리퀘스트 자체가 실패하는 경우
리퀘스트는 성공적이지만 상태 코드가 실패를 나타내는 경우(4XX, 5XX)

fetch 함수는 첫 번째 경우에만 리턴하는 Promise를 reject하게 된다. 두 번째 오류를 해결하기 위해서는 response 상태 코드의 성공 여부를 파악하여 오류를 throw 해주어야 한다. response의 성공 여부는 (.ok) 프로퍼티로 확인이 가능하다.

const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);

if (!res.ok) {
    throw new Error('데이터를 불러오는데 실패했습니다.');
}

const data = await res.json();

axios

fetch와 비슷한 문법을 사용하고 JSON자동변환, 자동문자열 변환, CSRF 보호 기능 등 fetch에는 없는 기능들을 제공하고 있다.

axios는 fetch와 달리 내장 라이브러리가 아니기 때문에 별도의 라이브러리 설치가 필요하다.

npm install axios

const { data } = await axios({ 
    method: "get, 
    url: "https://jsonplaceholder.typicode.com/posts", 
}).then((response) => console.log(response.data));

fetch와 달리 데이터를 parsing 할 필요 없이 .data를 이용하여 데이터를 가져올 수 있다.

axios.get("url", {
        params: {
          	id: 123
        }
    })
    .then(response => {
         console.log(response.data)
    }).catch(error => {
        // 오류발생시 실행
    });

다음과 같이 params를 설정해줄 수 있다.

참고 자료

자바스크립트의 fetch() 함수로 원격 API 호출하기
[JavaScript] Axios VS Fetch 무슨 차이일까