[Javascript] 비동기 HTTP 통신

✋ 들어가기 전

• <input type="submit"> 이나 <button type = "submit"> 을 이용해 전송
• 전송 시 페이지가 이동이 되는데 이러한 방식을 정적인 폼전송 방식이라고 한다.

📞 비동기 HTTP 통신

• 아마 대부분의 사람들이 로그인 시 틀렸을 때 페이지는 이동하지 않고 위의 예시의 빨간 글씨처럼 글자만 생기는 것을 본 경험이 있을 것이다.
• 이와 같은 방식을 비동기 HTTP 통신을 활용한 동적인 폼전송이라고 할 수 있다.

1. 동기 방식

• 한번에 하나만 처리하며, 페이지를 아예 이동한 후 서버가 데이터를 처리함.

2. 비동기 방식

• 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리가 가능 !
• 폼의 데이터를 서버와 dynamic 하게 송수신 하는 것
• dynamic : 웹 문서가 정적으로 멈춰있는 것이 아니라 일부 내용이 실시간으로 변경되는 것

🧐 비동기 HTTP 통신 방법

✅ AJAX
✅ AXIOS
✅ FETCH

1. AJAX

• Asynchronous Javascript And XML
• 자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고 받는 비동기 HTTP 통신

장점

• JQuery를 통해 쉽게 구현 가능
• Error, Success, Complete의 상태를 통해 실행 흐름을 조절할 수 있다.

단점

• JQuery를 사용해야만 간편하고 호환성이 보장된다.(xml 사용은 복잡)
• Promise 기반이 아니다.

예시

$.ajax({
    url: "/ajax",
    type: "POST",
    data: data,
    success: function(data){
  		console.log(data);
	}
})

2. AXIOS

• Node.js와 브라우저를 위한 Promise API 활용
• 비동기 HTTP 통신이 가능, return이 Promise 객체로 온다.

장점

• Promise 기반으로 만들어져 사용이 편리함.
• 브라우저 호환성이 뛰어남.

단점

• 모듈 설치 or 호출을 해줘야 사용이 가능함.

예시

var data = {
	name : "홍길동",
  	gender : "남자",

}

axios({
    method: "post",
    url: "/axios",
    data: data // get -> `params: data`
}).then((response) => {
	console.log(response.data);
});

3. FETCH

• ES6부터 들어온 Javascript 내장 라이브러리
• Promise 기반

장점

• Promise 기반으로 만들어져 사용이 편리함.
• Javascript 내장 라이브러리이므로 별도의 import 필요가 없음.

단점

• 최신 문법
• Timeout 기능이 없음.
• Axios에 비해 상대적으로 기능이 부족함.

예시

// fetch - get 방식
var urlQuery = `?name=${form.name.value}&gender=${form.gender.value}`;

fetch("/fetch" + urlQuery, {
    method: "get",
})
.then((response) => response.json()) // AXIOS와 다르게 json 형태로 파싱.
// .then((response) => response.text()) : res.send("문자열") 일 경우
.then((data) =>{
	console.log(data);
})

// fetch - post 방식
fetch("/fetch", {
    method: "post",
  	headers: {
      	"Content-Type": "application/json",
    },
    body: JSON.stringify(data)
})
.then((response) => response.json()) // AXIOS와 다르게 json 형식을 거침.
.then((data) =>{
	console.log(data);
})