자바스크립트 Fetch API 사용하기 ($ajax 그만 쓰자)

요즘 제이쿼리를 안쓰려고 한다.

 

이유는 단순하다. 오류 찾기가 너무 어렵더라. 그리고 제이쿼리 자체가 너무 오래된 라이브러리기도 하고

자바스크립트를 공부하려면 제이쿼리 안쓰는게 좋을거 같아서...

 

근데 다른것들은 다 괜찮은데 Ajax 요청을 바닐라js로 작성하는게 문제였다.

 

const xhr = new XMLHttpRequest();
const method = "GET";
const url = "https://어쩌구저쩌구URL";

xhr.open(method, url);

// onreadystatechange 이벤트를 이용해 요청에 대한 응답 결과를 처리
// XMLHttpRequest의 상태가 변하면 얘가 감지한다.
xhr.onreadystatechange = function (event) {
    const { target } = event;

    if (target.readyState === XMLHttpRequest.DONE) {
        const { status } = target;

        if (status === 0 || (status >= 200 && status < 400)) {
            // 요청이 정상적으로 처리 된 경우
        } else {
            // 에러가 발생한 경우
        }
    }
};

// 서버에 요청을 보내기
xhr.send();

매번 http 요청을 보낼때 이렇게 써야한다고 하면 그냥 $ajax쓰는게 훨씬 낫다.

 

다행히 바닐라js에는 Fetch API라는 좋은 대안이 있었다.

 

---

GET요청

 fetch('https://어쩌구URL') //이렇게 따로 옵션을 안주면 GET요청이다
 	.then((res) => res.json()) //JSON 데이터를 받으면 json()으로 파싱, text면 text() 사용
 	.then((data) => console.log(data));
    .error((error) => console.error(error));

---

POST 요청

let reqData = {name: 'John'};
fetch('https://어쩌구URL', {
	method: 'POST',
	body: reqData,
})
	.then((res) => res.json())
	.then((resData) => {
		console.log(resData);
    })
    .error((error) => console.error(error));

---

훨씬 간단하고 사용하기도 편하다.

 

fetch API는 자바스크립트 내에 내장된 api인데 http 요청을 보낸 후 Promise 객체를 반환한다.

 

물론 저렇게만 쓴다면 우리가 Promise객체를 컨트롤할 필요도 없고 바로 데이터를 받아와서 매우 편하다.

 

저 .then()이라는 메서드가 $ajax의 success 처럼 다음 실행할 콜백함수를 동기적으로 실행시켜준다.

(http 요청을 동기처리해준다는게 아니라 응답이 온 이후 실행할 콜백함수를 동기처리해준다는 뜻이다.)

 

더 자세히 이해하고 싶다면 Promise객체에 관해서 공부하는것을 추천