fetch() 함수 사용하여 API 호출(ajax, Axios, fetch 비교)

 

이전에 작성했던 jQuery를 바닐라 JS로 변경하기라는 글에서도 잠깐 서술한 적이 있는 fetch에 대해서 알아보려고 합니다. fetch에 대하여 정리하면서 Ajax와 fetch, Axios의 차이점에 대해서도 간단히 정리해 보려고 합니다.

 

일반적으로 외부 API를 호출하기 위해서는 비동기 방식을 이용하여 데이터를 가져와야 합니다. JavsScript에서 비동기 통신을 위해 사용하는 대표적인 방법으로는 Ajax, Axios, fetch가 있습니다. 

 

동기, 비동기 개념과 차이 

-동기방식 (Synchronous : 동시에 일어나는)

 요청과 그 결과가 동시에 일어난다는 약속으로, 바로 요청을 하면 시간이 여부에 상관없이 결과가 나올 때까지 기다렸다가 결과가 나타난 후 다음 명령어를 실행합니다. 

  

 -비동기방식 (Asynchronous : 동시에 일어나지 않는)

 : 동시에 일어나지 않는다는 약속으로, 요청과 결과가 동시에 일어나지 않습니다. 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 말합니다.

Ajax

Asysnchronous JavaScript And XML의 약자로, 자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신입니다. XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있으며

Error, Success, Complete의 상태를 통해 실행 흐름 조절 가능합니다. 다만 promise기반이 아니고 데이터를 갱신하기 위해서 하나의 작업을 콜백으로 결과를 받은 후 다음 작업을 진행하고자 할 때 이러한 콜백의 중첩(콜백 지옥) 현상이 발생할 수 있습니다. 

 

콜백중첩 예시

async(1, function(){
  async(2, function(){
    async(3, function(){
      async(4, function(){
        console.log('콜백 중첩 현상')
      })    
    })
  })
})

 

XMLHttpRequest(XHR)를 사용한코드

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { // 요청에 대한 콜백
  if (xhr.readyState === xhr.DONE) { // 요청이 완료되면
    if (xhr.status === 200 || xhr.status === 201) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.responseText);
    }
  }
};
xhr.open('GET', 'https://localhost:3000'); // 메소드와 주소 설정
xhr.send(); // 요청 전송 
// xhr.abort(); // 전송된 요청 취소

Jquery를 사용한 코드

var serverAddress = 'https://localhost:3000';

// jQuery의 .get 메소드 사용
$.ajax({
    url: serverAddress,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

Axios

axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리입니다. 비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽습니다. 또한 브라우저 호환성이 좋습니다. 다만 사용을 위해 별도의 모듈(라이브러리)을 설치해 줘야 합니다. 참고로 promise는 자바스크립트 비동기 처리에 사용되는 객체입니다

fetch

ES6부터 들어온 JavaScript 기본 내장 라이브러리로 사용을 위해 별도로 import 할 필요가 없습니다. Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽습니다. 다만 IE11은 지원하지 않습니다. IE11에서 사용하려면 fetch 역시 라이브러리를 사용해서 사용해야 합니다. 또한 fetch는 JSON으로 변환하여 데이터를 처리해야 하고 상대적으로 axios에 비해 기능이 부족한 단점이 있습니다.

 

사용법

fetch() 함수는 첫 번째 인자로 URL, 두 번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve 하고, 실패했을 경우에는 예외(error) 객체를 reject 합니다.

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

대부분의 REST API들은 JSON 형태의 데이터를 응답하기 때문에, 응답(response) 객체는 json() 메서드를 제공합니다.

fetch("https://api.coinpaprika.com/v1/tickers")
  .then((response) => response.json())
  .then((data) => console.log(data));

 

 

감사합니다.