JS 비동기 HTTP 통신

1. AJAX(Asynchronous Javascript And XML)

비동기식 자바스크립트와 XML 이란 의미로 데이터를 이동하고 화면을 구성하는 데 있어 화면을 갱신하지 않아도 필요한 데이터를 서버로 보내고 응답을 가져오는 방법으로 페이지를 전체 새로고침 하지 않아도 데이터를 조회할 수 있음

 - JQuery를 통해 Ajax를 더 쉽게 사용할 수 있음. 코드도 간단하고, 브라우저 간 호환성이 보장되어 있음.

 

2. Axios

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.

=> return을 Promise 객체로 해주기 때문에 response 데이터를 다루기 쉬움.

 - 백엔드와 프론트엔드의 통신을 쉽게 하기 위해 사용하는 Ajax와 더불어 사용함.

 - 운영환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용

axios({
	method: 'post',
    url: '/post/123',
    data: {
    	title : 'test',
        writer : 'a123'
    }
});

3. fetch

 JS 내장 라이브러리로, promise 기반으로 만들어져 있으며 axios 보다는 브라우저 호환성이 떨어진다.

 

*****************************************************************************************

Promise 

 - JS의 Promise 객체는 비동기 연산을 수행하고 연산이 종료되면 결과를 알려준다.

 - ES6에 추가된 객체로 콜백 지옥 같은 코드 형성 안되도록 도와줌.

 

Promise 상태 종류와 사용코드

상태 종류

 1. 대기(pending) : 아직 작업이 완료되지 않은 상태 또는 초기 상태

 2. 이행(fulfilled) : 작업이 성공적으로 완료된 상태

 3. 거부(rejected) : 작업 수행 중, 어떠한 요인으로 인해 실패한 상태

특징

 - 작업이 성공적으로 완료되면 Promise.resolve() 메서드를 통해 결과 값으로 이행하는 Promise 객체 반환

 - 작업이 실패되면 Promise.reject() 메서드를 통해 거부하는 Promise 객체 반환

 - Promise.prototype.then() , Promise.prototype.catch() 메서드는 arguments로 콜백 함수를 받는데,  이 콜백 함수를 통해 이행, 거부 결과를 확인할 수 있음

var test = function (param) {
	return new Promise(function (resolve, reject) {   // 대기상태
    	window.setTimeout(function() {
        	if(param){
            	resolve("완료"); 
            } else {
            	reject (Error("실패"));
            }
        }, 3000);        
    });
};

test(true).then (function (text) {   // resolve() 호출할때가 이행 상태 
    	console.log(text);
    },function (error) {
    	console.log(error);
    }