비동기 HTTP 통신

클라이언트와 서버간에 데이터를 주고 받기위한 HTTP 통신을 자주 사용하게됨.
여기서 HTTP 통신이란, 한 컴퓨터가 다른 컴퓨터에게 어떤 정보를 전달하기 위해 보내는 정보 패킷.
JS에서 비동기 HTTP 통신을 위해 사용되는 것들 확인

Ajax (Asynchronous JavaScript And XML)

Ajax를 통해 서버와 비동기적으로 통신함으로 인해 우리는 전체 웹페이지를 다시 불러오는 동기 방식과는 다르게 점진적으로 해당 부분의 사용자 인터페이스를 갱신할 수 있습니다.
우리가 보통의 상황에서 Ajax라는 말을 사용할 때를 보면 JQuery의 Ajax를 일컫을 때가 많습니다.
그렇지만 이는 아주 조금 잘못되었습니다.
Ajax라는 친구를 JQuery를 통해 보다 더 쉽게 사용할 수 있기에 우리는 JQuery와 Ajax를 함께 묶어서 말할 때가 많은 것 뿐이죠.

// Ajax 사용법

let 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(); // 요청 전송

// Jquery를 통한 Ajax 사용법

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);
    }
});

브라우저 간 호환성이 좋지 않다. 단, jquery를 사용할 경우 호환성 보장
요청의 상태나 변경을 구독하려면 Event를 등록해서 변경사항을 받아야 했고 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 들어가기 좋지 않음.

Axios

HTTP 요청에 최적화 되어 있고 상태도 잘 추상화 되어 있는 api들이 생겨나.
Axios는 Promise based HTTP client for the browser and node.js
즉, node.js와 브라우저를 위한 HTTP통신 라이브러리입니다.
비동기로 HTTP 통신을 가능하게 해주며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기도 쉽습니다.

//

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Yongseong',
    lastName: 'Kim'
  }
});

크로스 브라우징에 신경을 많이썼기에 브라우저 호환성이 뛰어나다
response timeout 처리 방법이 있다.

fetch

ES6부터 JavaScript의 내장 라이브러리로 들어옴.

//fetch

const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
  	name:'sewon',
    	age:20
  })

  fetch(url,options)
  	.then(response => console.log(response))

내장 라이브러리이기에 별도의 import를 해줄 필요가 없다.
내장 라이브러리이기에 사용하는 프레임워크가 안정적이지 않을 때 사용하기 좋다.
internet explorer의 경우에는 fetch를 지원하지 않는 버전도 존재한다. (브라우저 호환성이 상대적으로 떨어진다.)