TIL17. Fetch API
Today I Learned
오늘은(어제는) fetch api를 이용하여 AJAX 통신하는 과정에 대해 공부했다.
fetch API
오늘은(어제는) fetch api를 이용하여 AJAX 통신하는 과정에 대해 공부했다.
fetch API
를 이용하면 Request나 Response같은 HTTP 파이프라인을 구성하는 요소를 조작하는 것이 가능하다.
fetch API 사용법
const request = (url: string) => {
return fetch(url)
.then((response) => response.json())
.then((data) => {
// 데이터 처리
return data; // promise 객체
})
.catch((error) => {
console.log(error.messages);
}
}
fetch API는 프로미스 체인으로 구성되어 있어 가독성이 높고 손 쉽게 AJAX 통신이 가능하다. 그리고, 프로미스 특성상 async/await
예약어로 동기적으로 작성할 수도 있다.
단, 서버와의 통신이 400번대, 500번대 에러(서버와 통신이 제대로 되지 않았음에도) 에러가 발생하지 않으므로, status
코드로 나누어 에러를 반환하도록 설정해야 한다.
axios
라이브러리를 사용하면 따로 관리해줄 필요 없이 interceptor
만 설정해주면 된다.
참고. 이전의 XMLHttpRequest
XMLHttpRequest
는 이벤트를 바탕으로 AJAX 통신을 하였고, 성공과 실패 콜백함수를 입력받아 각 경우를 나눠서 실행했었다.
function request(url: string, onFulfilled: Function, onRejected: Function) {
const xhr = new XMLHttpRequest();
xhr.addEventListener("load", (e) => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// fulfilled
onFulfilled(JSON.parse(xhr.responseText));
} else {
onRejected(xhr.statusText);
}
}
});
xhr.addEventListener("error", (e) => {
onRejected(xhr.statusText);
});
xhr.open("GET", url);
xhr.send();
}
export { request };
비동기 작업이 많이 중첩될수록 관리가 어려워진다.
마치며
주로 프로젝트를 만들 때 axios
를 사용하였으므로 평소에 쓸 일이 거의 없었고, 앞으로도 쓸일이 있을까...?
Author And Source
이 문제에 관하여(TIL17. Fetch API), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mrbartrns/TIL17.-Fetch-API저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)