.jpg)
HTML의 GET, POST 요청 메소드 한계를 Ajax를 통한 해결
Table of Content
Ajax → Fetch API
이전 Ajax를 통해서 REST 아키텍처를 갖추었지만 jQuery AJAX는 요청을 보내고, 성공 및 오류에 대한 각각의 콜백 함수를 직접 구현하고 있었다. success 부분의 function, error 부분의 function 이를 통해 비동기 요청을 처리하는 기능은 구현되고 있는 것이다.
하지만 여러 콜백함수를 직접 작성, 사용해야 하므로 코드가 다소 복잡해질 수 있는 문제점이 있었다.
이러한 문제점을 개선 할 수 있었던건 Promise객체로 실패, 성공 상태를 가지는 객체로써 Fetch API 함수는 항상 이 객체를 반환하는 것으로 설계되었다.
따라서, fetch() 메서드를 통해서 메서드 체이닝(. 연결)을 통해 .then()과 .catch() 메서드를 사용 할 수 있어 구조적으로 가독성을 높이는 역할을 하게 되었다.
•
Ajax 요청의 일반적인 형태
$.ajax({
url: '/api/some-endpoint', // 요청할 URL
type: 'POST', // HTTP 메서드
data: JSON.stringify({ // 전송할 데이터 (예: JSON 문자열)
key1: 'value1',
key2: 'value2'
}),
contentType: 'application/json', // 데이터 형식 지정
success: function(data) { // 성공 시 호출되는 콜백
console.log('성공:', data);
},
error: function(error) { // 실패 시 호출되는 콜백
console.error('에러:', error);
}
});
JavaScript
복사
•
Fetch API 요청의 일반적인 형태
fetch('/api/some-endpoint', {
method: 'POST', // HTTP 메서드
headers: {
'Content-Type': 'application/json' // 데이터 형식 지정
},
body: JSON.stringify({ // 전송할 데이터 (예: JSON 문자열)
key1: 'value1',
key2: 'value2'
})
})
.then(response => {
if (!response.ok) {
throw new Error('네트워크 오류');
}
return response.json(); // 응답을 JSON으로 변환 / 완료되어야 다음 .then()이 실행
})
.then(data => {
console.log('성공:', data); // 성공 시 데이터 처리
})
.catch(error => {
console.error('에러:', error); // 오류 처리
});
JavaScript
복사
Ajax는 초기 설정이 간편하고 사용도 편리하게 발전되도록 기여했다 하지만 외부 라이브러리에 의존하며, 코드가 길어질 수 있는 문제점도 내포한다. 두개를 비교해보면 Fetch API가 보다 코드가 길어보일 수 있지만 몇가지 장점을 통해서 현재까지 널리 사용되고 있는 요청 방식이다.
Fetch API의 장점
1.
내장 API : Fetch API는 브라우저 내장 API로, 별도의 라이브러리(예: jQuery)를 참조할 필요가 없음, ES6(2015)부터 지원되기 시작함
2.
비동기 처리 방식 : 둘다 비동기 처리를 지원하지만, Fetch API는 프로미스(Promise)를 사용하여 비동기 처리를 수행하며 성공과 실패를 처리하는 로직이 내부적으로 (then, catch)분리되어 있음
3.
Fetch API는 .then()과 .catch()를 사용하여 후속 처리를 체이닝하기 편함
4.
Fetch API는 응답을 JSON으로 변환하기 위한 메서드를 제공하므로, JSON 데이터를 쉽게 다룰 수 있음 response.json() 내장
5.
Fetch API는 async/await 구문과 함께 사용할 수 있어, 비동기 코드를 더 직관적이고 동기식 코드처럼 작성할 수 있음(then(), catch() 구문이 try/catch 절로 변경되었으며 then절의 체이닝 추가(비동기 결과를 기다리는 부분)를 간략하게 await을 통해 비동기 부분을 기다림)
결과 아래와 같은 코드로 요청을 수행하게 된다.
async function fetchData() {
try {
const response = await fetch('/api/some-endpoint', {
method: 'POST', // HTTP 메서드
headers: {
'Content-Type': 'application/json' // 데이터 형식 지정
},
body: JSON.stringify({ // 전송할 데이터 (예: JSON 문자열)
key1: 'value1',
key2: 'value2'
})
});
if (!response.ok) {
throw new Error('업데이트 오류'); // throw를 통해 catch절로 오류 객체 전달
}
const data = await response.json(); // 응답을 JSON으로 변환
console.log('성공:', data); // 성공 시 데이터 처리
} catch (error) {
console.error('에러:', error); // 오류 처리
}
}
JavaScript
복사
리팩토링
contactList.ejs 에서 문의사항 수정 부분을 Fetch API를 사용하여 수정해보자.
async function updateContact(contactId) {
try {
const response = await fetch(`/api/contactUpdate/${contactId}`, {
method: 'PUT', // HTTP 메서드
headers: {
'Content-Type': 'application/json' // 데이터 형식 지정 (필요한 경우)
}
// PUT 요청의 경우 body가 필요할 수 있음
});
if (!response.ok) {
throw new Error('업데이트 오류'); // throw를 통해 catch절로 오류 객체 전달
}
alert('문의사항이 업데이트되었습니다.');
location.reload(); // 페이지 새로고침 또는 다른 업데이트 방식 선택
} catch (error) {
console.error('업데이트 오류:', error); // 오류 처리
}
}
JavaScript
복사
Related Posts
Search
