비동기 HTTP 통신 종류 (ajax, fetch, axios)

✅ 자바스크립트에서 HTTP Requests를 위한 방법에는 ajax, fetch, axios가 있습니다. 현재 다니고 있는 회사에서는 Fetch를 사용하여 처리를 하는데, API를 호출하는 공통 메서드가 정의되어있어 직접 찾아보고 공부하지 않으면 정확한 처리 로직을 알지 못할 거 같아 해당 글을 포스팅합니다. 추가적으로 Fetch와 많이 비교되는 Axios도 같이 공부하여 작성해보기로 했습니다.

---

📌 Ajax (Asynchronous JavaScript And XML)

 

• 자바스크립트를 사용한 비동기  통신, 클라이언트와 서버 간 데이터를 주고받는 기술입니다.
• 서버와 비동기적으로 통신함으로 인해(response와 request를 비동기 식으로 다룰 수 있다는 의미), 전체 웹페이지를 다시 불러오는 동기 방식과는 다르게 점진적으로 해당 부분의 사용자 인터페이스를 갱신할 수 있습니다.
• XMLHttpRequest가 사용되다가 불편함과 호환성을 이유로 jQuery 내에서 Ajax를 사용하는 것이 대세가 되었습니다.

❓ XMLHttpRequest(XHR) 객체

· Ajax의 가장 핵심적인 구성 요소입니다.
· 웹 브라우저가 서버와 데이터를 교환할 때 사용됩니다.  
· XMLHttpRequest객체를 이용하여 전체 페이지가 아닌 필요한 데이터만 불러오는 것이 가능합니다.

 

📌 Fetch

• ES6에서 지원된 비동기 통신을 위한 자바스크립트 내장 API입니다. (내장 API 이므로 별도 import 없이 사용 가능)
• Promise 기반으로 동작하여 데이터를 다루기 편리하며 콜백지옥을 해결할 수 있습니다. 
• 기본 응답 결과는 Response 객체로, json으로 바꾸거나 text로 바꾸는 별도의 처리 과정이 필요합니다.
• 구형 브라우저에서는 지원을 하지 않습니다.
• 네트워크 에러 발생 시 계속 기다려야합니다.
• API 요청을 취소할 수 없습니다.

fetch() 사용법

fetch() 함수는 2개의 인자를 받습니다.

 

1. url (필수) : 접근하고자 하는 url입니다.
2. [options] : 선택 매개변수, 생략할 경우 default는 'GET'방식입니다.

(https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch 에서 더 자세한 내용을 확인하실 수 있습니다.)

fetch(url, [options])

/* GET 예제 */

fetch('https://test.com/user?userid=3') //url에 userid란 파라미터를 추가
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        // 로직 ~
    }
  });
 
 
 /* POST 예제 */
 
 fetch('https://test.com/user', {
    method: 'post',
    headers: {
    	"Content-Type": "application/json",
  	},
    body: JSON.stringify({
        name: "Jeru",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => console.log(res));
  
  
/* PUT 예제 */

fetch('https://test.com/user', {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "Maru",
    body: "Test!",
    userId: 20,
  }),
})
  .then((res) => res.json())
  .then((res) => console.log(res));
  
  
/* DELETE 예제 */

fetch('https://test.com/user?userid=3', { //url에 userid란 파라미터를 추가
       method: "DELETE",
    })
  .then((res) => res.json())
  .then((res) => console.log(res));

• GET 방식
  fetch() 함수는 디폴트로 GET 방식으로 작동합니다. 요청 전문을 받지 않기 때문에 옵션 인자가 필요가 없습니다.
• POST 방식
  method 옵션을 POST로 지정해주고, headers옵션을 통해 JSON 포맷을 사용한다고 알려줘야 하며, 요청 전문을 JSON 포맷으로 직렬 화하여 body옵션에 넣어줍니다.
• PUT 방식
  method 옵션만 PUT으로 지정하는 것을 빼면 POST 방식과 흡사합니다.
• DELETE 방식
  method 옵션을 DELETE로 지정해주고, 보낼 데이터가 없으므로 headers, body옵션이 필요가 없습니다.

 

📌 Axios

• 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. (Promise 기반)
• 크로스 브라우징 기반으로 브라우저 호환성이 뛰어납니다. 
• fetch에 존재하지 않는 기능이 많습니다. (자동으로 JSON 데이터 형식으로 변환, 요청 취소 및 타임아웃 설정 가능 등..)
• 사용하려면 라이브러리 설치가 필요합니다.

axios() 사용법

/* axios 라이브러리 설치 */

// npm 사용
npm i axios

// yarn 사용
yarn add axios

axios 관련 기본 문법과 데이터 구성 정보는 아래 더보기를 눌러주세요!

/* axios 파라미터 문법 예시 */
 
axios({
    method: "get", // 통신 방식
    url: "www.naver.com", // 서버
    headers: {'X-Requested-With': 'XMLHttpRequest'} // 요청 헤더 설정
    params: { api_key: "1234", langualge: "en" }, // ?파라미터를 전달
    responseType: 'json', // default
    
    maxContentLength: 2000, // http 응답 내용의 max 사이즈
    validateStatus: function (status) {
      return status >= 200 && status < 300; // default
    }, // HTTP응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정
    proxy: {
      host: '127.0.0.1',
      port: 9000,
      auth: {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
    }, // proxy서버의 hostname과 port를 정의
    maxRedirects: 5, // node.js에서 사용되는 리다이렉트 최대치를 지정
    httpsAgent: new https.Agent({ keepAlive: true }), // node.js에서 https를 요청을 할때 사용자 정의 agent를 정의
})
.then(function (response) {
    // response Action
});

/* response 데이터의 구성 정보 */

response.data: {}, // 서버가 제공한 응답(데이터)
 
response.status: 200, // `status`는 서버 응답의 HTTP 상태 코드
 
response.statusText: 'OK',  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지
 
response.headers: {},  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공
 
response.config: {}, // `config`는 요청에 대해 `axios`에 설정된 구성(config)
 
response.request: {}
// `request`는 응답을 생성한 요청
// 브라우저: XMLHttpRequest 인스턴스
// Node.js: ClientRequest 인스턴스(리디렉션)

 

axios에 객체 옵션을 이것저것 주면 가독성이 떨어지기 때문에 편리하게 사용하기 위해 모든 요청 메서드는 aliases(명령어 별칭)가 제공됩니다. axios의 Request method에는 대표적으로 다음과 같은 것들이 있습니다.

 

• GET : axios.get(url[, config])
• POST : axios.post(url, data[, config])
• PUT : axios.put(url, data[, config])
• DELETE : axios.delete(url[, config])

/* GET 예제 */

// 단순 데이터(페이지 요청, 지정된 요청) 요청을 수행할 경우 url에 파라미터를 넣기!
axios.get('https://test.com/user?userid=3')
  .then(function (response) {
    // 성공 로직
  })
  .catch(function (error) {
    // 에러 로직
  })
  .finally(function () {
    // 항상 실행 로직
  });
 
// 파라미터 데이터를 포함시키는 경우 params 옵션을 이용하여 파라미터를 넣기!
axios.get('https://test.com/user', {
    params: {
      userId: 3
    }
  })
  .then(function (response) {
  // ~
  })
  .catch(function (error) {
  // ~
  })
  .finally(function () {
  // ~
  });
  

/* POST 예제 */

// post 메서드에는 일반적으로 데이터를 Message Body에 포함시켜 보냄!
axios.post("https://test.com/user", {
		name: 'Fred',
		userid: 100
    })
    .then(function (response) {

    }).catch(function (error) {

    })
    

/* PUT 예제 */

// PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로
// 내부적으로 get -> post 과정을 거치기 때문에 post 메서드와 비슷한 형태!
axios.put("https://test.com/user", {
        name: 'Fred',
        userid: 100
    })
    .then(function (response) {
         
    }).catch(function (error) {
        
    })
    

/* DELETE 예제 */

// delete 메서드에는 일반적으로 body가 비어있음!
axios.delete('https://test.com/user?userid=3')
  .then(function (response) {

  })
  .catch(function (error) {

  })

// query나 params가 많아져서 헤더에 많은 정보를 담을 수 없을 때는 두 번째 인자에 data를 추가!
axios.delete('https://test.com/user',{
    data: {
      userid: 3,
      username: "foo"
    }
  })
  .then(function (response) {
  
  })
  .catch(function (error) {
  
  })

 

📌 axios 🆚 fetch

axios	fetch
요청 객체에 URL 이 있습니다.	요청 객체에 URL 이 없습니다.
써드파티 라이브러리로 설치가 필요합니다.	ES6 내장 API로 따로 설치가 필요없습니다.
XSRF 보호 기능이 있습니다.	별도 기능이 없습니다.
data 속성을 사용합니다. data는 object를 포합합니다.	body 속성을 사용합니다. body는 문자열화 되어있습니다.
status 가 200이고, statusText가 'OK'일 때 성공입니다.	응답 객체에 ok 속성이 포함되어 있으면 성공입니다.
자동으로 JSON 데이터 형식으로 변환해줍니다.	.json() 메서드를 따로 사용해야합니다.
요청 취소 및 타임아웃을 걸 수 있습니다.	별도 기능이 없습니다.
HTTP 요청을 가로챌 수 있습니다.	별도 기능이 없습니다.
download 진행에 대해 기본적인 지원을 합니다.	별도 기능이 없습니다.
더 많은 브라우저를 지원합니다.	Chrome 42+, Firefox 39+, Edge 14+, Safari 10.1+만 지원합니다

 

🤔  정리 !

• 간단한 http 요청 처리, VanillaJS로 통신, react-native(빠른 업데이트 때문에) 환경에서는 fetch !
• 좀 더 많은 기능과 장점, 사용자 편의가 필요할 때, react 환경에서는 axios !
• 어떤 통신 방법을 택해서 사용을 하기 앞서 먼저 사용법과 그 차이를 숙지하자!

 

 

🔗 참고한 글

Difference between Fetch and Axios.js for making http requests - GeeksforGeeks

[AXIOS] 📚 axios 설치 & 특징 & 문법 💯 정리