AJAX

AJAX란?

• 웹 페이지에서 비동기적으로 서버와 데이터를 교환하고 페이지의 일부를 동적으로 업데이트하기 위한 기술

동기 VS 비동기

• 동기 실행방식:
  • 요청을 보낸 후 서버로부터 응답이 올 때까지 기다림. 이 과정에서 다른 작업을 수행할 수 없음.
• 비동기 실행방식:
  • 요청을 보낸 후 서버로부터 응답을 기다리지 않고 다른 작업을 수행할. 응답이 도착하면 이벤트를 통해 처리.
  • AJAX는 비동기 방식을 사용하여 페이지를 새로 고치지 않고도 서버와 데이터를 교환하고 업데이트

XMLHttpRequest

• 서버와의 비동기 통신을 가능하게 하는 여러 기능들을 가진 자바스크립트 객체. 주로 AJAX 기술에서 사용
  • HTTP 요청 전송: XMLHttpRequest 객체를 사용하여 서버에 HTTP 요청을 보냄. GET, POST 등 다양한 HTTP 메서드를 지원.
  • 비동기적 데이터 전송: AJAX에서 가장 중요한 역할. XMLHttpRequest는 비동기 방식으로 데이터를 전송하고 서버로부터 응답을 받을 수 있음. 이를 통해 페이지의 일부분만 업데이트할 수 있음.
  • 데이터 수신 및 처리: 서버로부터 받은 데이터를 수신하고 이를 처리. 일반적으로 XML, JSON 등의 형식으로 데이터를 주고 받을 수 있음.
  • 이벤트 기반 처리: XMLHttpRequest 객체는 상태 변화, 데이터 수신 등의 이벤트를 처리할 수 있. 이를 통해 요청의 진행 상태를 모니터링하고 적절히 처리.

Call back지옥이란?

일반적으로 JavaScript에서 비동기 작업을 수행할 때 콜백 함수를 사용, 콜백 함수들이 여러 개 중첩되어 사용될 경우 문제가 발생할 수 있음.

예를 들어, 하나의 비동기 작업이 끝나면 그 결과에 따라 다음 비동기 작업을 수행해야 하고, 그 작업이 끝나면 또 다른 작업을 수행해야 하는 식으로 계속 중첩되면서 코드의 가독성과 유지보수성이 떨어지며, 심지어는 버그의 원인이 될 수 있음.

fetch API

• fetch의 보편적 의미:
  • 주로 HTTP 요청을 보내고 응답을 받아오는 데 사용. fetch API는 기본적으로 Promise를 반환하여 비동기적으로 데이터를 처리

XHR과 fetch

• 차이점은?:
  • XMLHttpRequest 가 생성하는 인스턴스는 통신의 기능을 수행하는 XMLHttpRequest 객체를 반환했지만
  • fetch는 인스턴스를 만들지 않고, 대신 ‘약속’을 반환

Promise

• Promise란?: 비동기 작업의 최종 완료 또는 실패와 그 결과값을 나타내는 객체.
  • 대기(pending), 이행(fulfilled), 거부(rejected).
  • 비동기 작업이 완료되면 Promise는 이행 상태가 되고 결과를 반환하며, 문제가 발생하면 거부 상태가 되고 에러를 반환
• 통신 상태가 거절일때의 처리방법:
  • .catch() 메서드를 사용하여 에러를 처리

// 커피를 주문하는 프로미스 객체를 생성합니다. 생성자에는 약속을 지키기 위한 resolve와, 약속을 지키지 못했을 때를 대비한 reject 두 가지를 인자로 전달합니다. 
// 프로미스 객체를 생성하는 순간 프로미스 생성자함수의 콜백 함수가 실행됩니다. 이를 실행자(executor)라 부릅니다.
const orderCoffee = new Promise((resolve, reject) => {
  const requestObj = new XMLHttpRequest();

requestObj.open('GET', 'orderCoffee.txt');

requestObj.onreadystatechange = () => {

if (requestObj.readyState === 4) {

if (requestObj.status === 200) {

const result = requestObj.responseText;

// resolve 메소드가 실행되면 then 메소드가 자동으로 호출됩니다.

resolve(result);

} else {

// resolve 메소드 호출이 없는 상태에서 reject 메소드가 실행되면 catch 메소드가 자동으로 호출됩니다.

reject(new Error(</span><span class="token string">커피주문이 정상적으로 이뤄지지 않았습니다.: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>requestObj<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">));

}

}

};

requestObj.send();
});
// 이 부분에 주목해주세요. then 메소드를 사용하면 비동기 코드를 마치 동기적인 코드처럼 작성할 수 있습니다. 앞에서 작성한 XHR 코드와 비교해보는것도 좋습니다. 
// resolve 메소드가 실행될때 전달된 인자는 then 메소드의 콜백함수의 인자로 전달됩니다.

orderCoffee.then((asyncResult) => {

console.log(asyncResult);

console.log('약속이 이루어졌습니다.');

return asyncResult;

}).catch((error) => { // then 메소드는 프라미스 객체를 반환하기 때문에 catch 메소드를 이어서 쓰는것이 가능합니다.

// resolve 메소드와 마찬가지로 reject 메소드가 실행될때 전달된 인자는 catch 메소드의 콜백함수의 인자로 전달됩니다.

console.log(error);

})

fetch API 사용

fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json')
	.then((response) => {
			// response.ok 는 응답이 성공적(200-299)일 경우 true, 아니면 false를 반환합니다.
	    if (!response.ok) {
	        throw new Error(`HTTP error! Status: ${response.status}`);
	    }
	    return response.json();
	})
	.then((data) => {
	    console.log(data);
	    return data;
	})
	// fetch 함수는 네트워크 오류가 발생하면 reject 상태의 프로미스를 반환합니다. 
	.catch((error) => {
	    console.error(error);
	});
	
	
// fetch() 함수를 사용하여 주어진 URL에서 데이터를 가져오고, response.json()을 통해 JSON 형식으로 변환된 데이터를 사용. 
//성공적으로 데이터를 가져온 경우 .then() 메서드를 이용하여 데이터를 처리
//네트워크 에러 등의 문제가 발생하면 .catch() 메서드를 통해 에러를 처리

async, await

• JavaScript의 비동기 처리를 보다 간편하고 동기식 코드처럼 작성할 수 있도록 도와주는 문법
• async: 함수 앞에 async 키워드를 붙이면 해당 함수는 항상 Promise를 반환. 비동기 처리가 포함된 함수를 동기식처럼 작성할 수 있음.
• await: await 키워드는 Promise가 처리될 때까지 기다린 후, 그 결과를 반환. await는 async 함수 안에서만 사용할 수 있음.