[Javascript] Ajax와 axios?

- 기존 정보에 잘못된 부분들이 있어 전반적으로 내용을 수정했습니다.

JS에서 비동기 http 통신을 위한 방법은 대표적으로 3개(Ajax, Axios, fetch)가 있습니다.

그 중 많이 사용되는 Ajax와 axios를 중점으로 알아봅시다!

개념

AJAX (Asynchronous Javascript And Xml)

Ajax 는 Asynchronous Javascript and Xml 의 약자인데, 비동기식 자바스크립트와 XML 이란 의미이다.
즉, 데이터를 이동하고 화면을 구성하는데 있어 화면 갱신 없이 필요한 데이터를 서버로 보내고 응답을 가져오는 방법입니다.

그렇다면 왜 사용하는걸까 ?

- 단순하게 생각하면 WEB화면에서 무엇인가 부르거나 데이터를 조회하고 싶을때 페이지 전체를 새로고침하고 싶지 않아서라고 표현할 수 있습니다.

Ajax (읽어보기) , jquery라이브러리 ajax (⭐️), axios(⭐️), fetch(읽어보기) 순으로 설명을 이어나가겠습니다.

Ajax 
보통 상황에서는 Javascript Ajax가 아니고 JQuery의 Ajax를 생각한다.

1. 데이터 형식
데이터 전송형식에는 다양한 방법이 있겠지만, ajax에서는 크게 CSV, JSON, XML형식으로 보내게 됩니다.

(1) csv 형식
, 로 데이터 속성을 나누고 줄바꿈으로 데이터를 나누는 방식
장점 : 용량이 적다.
단점 : 가독성이 떨어진다.

(2) XML 형식
CSV형식의 가독성을 개선하기 위해 나온 형식으로, 속성과 데이터를 구분한다
장점 : CSV에비해 가독성이 좋다.
단점 : 용량이 크며 데이터가 많아지면 분석력이 떨어진다.

(3) JSON형식
javascript객체 형태로 데이터를 전송하며, 가장 많이 쓰이는 형식이다.
장점 : 가독성도 적고 용량도 적다.
단점 : 여전히 데이터가 많아지면 분석 속도가 떨어진다.

2. 데이터 전송 방식
여러방식이 존재하나, CRUD기준으로 설명하겠습니다.

Create(생성) = POST

create는 서버에 정보를 올려달라는 요청입니다. create는 POST 메서드를 사용해 요청합니다. POST를 통해 해당 URI를 요청하면 리소스를 생성합니다.

Read(읽기) = GET

read는 서버에서 정보를 불러오는 요청입니다. read는 GET 메서드를 사용해 요청합니다. GET를 통해 해당 리소스를 조회합니다. 리소스를 조회하고 해당 도큐먼트에 대한 자세한 정보를 가져옵니다.

Update(갱신) = PUT, PATCH

update는 정보를 바꾸는 요청입니다. update는 PUT 혹은 PATCH 메서드를 사용해 요청합니다. PUT은 데이터 전체를 바꾸고 싶을 때, PATCH는 데이터의 일부만 수정하고 싶을 때 사용합니다.
- 브라우저 특성상 지원하지 않는 문제가 있어 GET, POST 많이 사용합니다.

Delete(삭제) = DETELE

delete는 정보를 지우는 요청입니다. delete는 DELETE 메서드를 사용해 요청합니다. DELETE를 통해 리소스를 삭제할 수 있습니다.

GET과 POST비교
단순히 데이터를 읽어들이는게 GET, 생성 변경 삭제를 하는경우 POST를 사용합니다(넓은 역할을 하는중..).
GET방식은 URL에 정보가 고스란히 담기므로, 민감한 정보는 GET방식으로 사용하지 않습니다.

Javascript Ajax
JavaScript Ajax 구현에 있어, XMLHttpRequest객체(XHR)는 반드시 필요한 객체입니다. 그런데 IE7이하 버전에서는 지원해주지 않으므로 XHR을 사용하이 않고 ActiveXObject를 사용해야합니다.

JQuery Ajax

구현
Javascript Ajax로 구현하는것보다 좀 더 명시적이게 작성할 수 있습니다!

function ajaxAct() {
  $.ajax ({
    type : "GET",                     // GET 또는 POST
    url : 'updatetest.htm',          // 서버측에서 가져올 페이지
    data : 'a=1&b=2&c=3',       // 서버측에 전달할 parameter
    timeout : 5000,                  // 응답대기시간 
    dataType : 'html',               // html , javascript, text, xml, jsonp 등이 있다
    cache : false, // 캐시가 남아서 갱신된 데이터 못받아 올 경우
    beforeSend: function() {      // ajax 요청하기전에 실행되는 함수
    },
      success : function(data) {     // 정상적으로 완료되었을 경우에 실행된다
        dataAct(data);// data 인수에는 return 되어진 data 가 저장되어 있다

    },
      error : function(request, status, error ) {   // 오류가 발생했을 때 호출된다. 
       console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    },
    complete : function () {   // 정상이든 비정상인든 실행이 완료될 경우 실행될 함수

    }
  });
}

//이때, success , error, complete 대신에 done, fail, always 를 사용해도 된다. 

$.ajax ({
  ~~~~
  ~~~~
  ~~~~
})
.done(function(){ console.log("요청 성공시 호출") })
.fail(function(){ console.log("요청 실패시 호출") })
.always(function(){ console.log("성공 실패 상관없이 호출") })

1. 성공일 경우 : success > complete > done > always

2. 실패일 경우 : error > complete > fail > always

참고 : beforesend의 활용

Ajax를 이용하여 해당 API에 직접 접근하여 데이터를 가져올때 보안관련 이슈문제 때문에 해당 API에 접근하기 위해서는 호출하는 Header에 발급받은 ApiKey를 삽입하여 호출해야 하는 상황이 발생하였다.

jQuery Ajax의 경우 beforeSend 부분을 추가하여 쉽게 처리 할 수 있다.

beforeSend : function(xhr){
	xhr.setRequestHeader("ApiKey", "asdasdjasdas");
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
}

beforeSend는 Ajax를 요청하기 직전의 콜백함수로서 jqXHR 객체를 수정할 수 있다.
위의 경우에도 jqXHR에 헤더값을 추가한 것이다.

장점 

jQuery를 통해 쉽게 구현이 가능하다. error, success, complete의 상태를 통해 실행흐름을 쉽게 조절할 수 있다.

단점

jQuery를 사용해야한다. promise기반이 아니다.

 

Axios

개념

node.js와 브라우저를 위한 http통신 라이브러리이다.

fetch와 달리 크로스 브라우징에 최적화되어있어 IE11까지 모조리 지원한다.(호환성에 중점)

promise를 지원하며, 편리하고 기능이 많아 몇몇 프론트 프레임워크에서는 사용을 권장한다.

장점

javascript에 라이브러리 npm i aixos 구형 브라우저를 지원한다.그런데 es6문법을 사용하므로 낮은 버전의 브라우저에서는 구동하지 않을수도 있다. 하지만 이것은 바벨 웹펙 등으로 트랜스파일을 가하면 해결된다. 응답 시간 초과를 설정하는 방법이 있다. 요청을 중단 시킬 수 있다. JSON 데이터 자동변환이 가능하다. node.js에서의 사용이 가능하다. request aborting(요청 취소)가 가능하다. catch에 걸렸을 때, .then을 실행하지 않고, console창에 해당 에러 로그를 보여준다. return값은 Promise 객체 형태이다.

단점 

라이브러리 설치 필요

구현
xn--xy1bk56a.run/axios/guide/api.html#http-%EB%A9%94%EC%84%9C%EB%93%9C-%EB%B3%84%EC%B9%AD

axios({
  url: 'request url',
  method: 'get',
  data: {
    foo: 'diary'
  }
});

 

그러나 보기 명확하게 method를 분리하여 사용할 수도 있다.

• axios.get()

import axios from "axios";

const load = async () => {
  try {
    const tickes = await axios.get(`https://api.coinpaprika.com/v1/tickers`);
    console.log(tickes);
  } catch (error) {
    console.log(error);
  } finally {
    //   Do something
  }
};

load();

• axios.post()

 

import axios from "axios"
axios.defaults.baseURL = "http://localhost:5000/";

const Data = {
  firstName: 'Fred',
  lastName: 'Flintstone'
}

const config = {
  status: 200,
  statusText: 'OK',
  headers: {}
}

axios.post('/user', Data, config)
  .then(response => console.log(response))
  .catch(error => console.log(error));
  
  //form데이터 전송하는 경우
  const addCustomer = () => {
  const url = `/api/customers`;
  const formData = new FormData();
  formData.append("image", file);
  formData.append("name", userName);
  formData.append("birthday", birthday);
  formData.append("gender", gender);
  formData.append("job", job);
  const config = {
    headers: {
      "content-type": "multipart/form-data",
    },
  };
  return axios.post(url, formData, config);
};

편리한 사용을 위해 요청 메소드는 aliases가 제공됩니다.

• axios.delete()
• axios.put()
• axios.patch()
• axios.option()

axios.request(config)

axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])

axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

잘 정리되어있는 블로그 첨부 : sangcho.tistory.com/entry/axios

fetch

• JavaScript의 내장 라이브러리이기 때문에 import 하지 않고 사용할 수 있다.
• 라이브러리의 업데이트에 따른 에러 방지가 가능하다.
  (React Native의 경우 업데이트가 잦아서 라이브러리가 쫓아오지 못하는 경우가 많은데, fetch의 경우 이를 방지할 수 있다.)
• 네트워크 에러가 발생했을 때 기다려야한다. (response timeout API 제공X)
• 지원하지 않는 브라우저가 있다.
• return값은 Promise 객체 형태이다.

구현

fetch('request url', {
    method: 'POST',
    body,
  }).then((res) => {
    //...
});

 

결론

다양한 방법이 있으므로 필요한데 필요한 라이브러리를 가져다 쓰면 되는데,

JQuery의 Ajax나, axios가 편리하다.

출처: https://fruitdev.tistory.com/173 [과일가게 개발자]

참고: https://donghunee.github.io/study/2019/10/21/react/

[React]axios와 fetch 비교

참고: doolyit.tistory.com/20

jQuery ajax 기본 사용법 ... 비동기적 서버통신 done,fail, always

ajax옵션: cofs.tistory.com/404

jquery ajax 옵션 총정리

www.nextree.co.kr/p9521/

JavaScript, jQuery, 그리고 Ajax

velog.io/@realryankim/TIL-Axios%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-HTTP-%EC%9A%94%EC%B2%AD%ED%95%98%EA%B8%B0