3. XHR과 Fetch

1. XMLHttpRequest

보통 XHR이라고 부르며  아래와 같은 형식으로 사용됩니다.

객체를 생성한후 요청이 완료됐을 경우 onload 함수를, 에러가 발생하면 error 함수를 실행하고

req.open을 사용하여 get 요청을 전달하고, req.send를 호출하여 요청을 보냅니다.

 

const req = new XMLHttpRequest();

req.onload = function (){
    console.log("IT LOAD");
    const data = JSON.parse(this.response);
}

req.onerror = function () {
    console.log("error");
    console.log(this);
}


req.open("GET","https://swapi.dev/api/1");
req.send();

 

하지만  XHR이 Promise 나 비동기 함수를 지원하지 않아 연속적으로 이어지는 요청을

콜백 여러개를 사용하여 계속 중첩하게 되면서 코드가 복잡해집니다.

이를 해결하기 위해 아래와 같은 Fetch를 사용하게 됩니다.

 

2. Fetch

fetch("https://swapi.dev/api/1")
 .then((res)=>{
    console.log("RESOLVED",res)
    return res.json
 })
 .then((data)=>{
    console.log(data);
 })
 .catch((e) => {
    console.log("ERROR!", e)
 });

Fetch는 원리는 XHR과 비슷하지만 더 최신기술입니다.

Promise 기반의 비동기 동작을 제공하고 간단한 사용법을 제공합니다.

 

1. 처음에 fetch() 함수를 사용하여 데이터를 가져오고 전달합니다.

2. 그후 fetch는 Promise 객체를 반환하므로. then 메서드를 사용합니다.

 

첫 번째. then은 응답 객체를 받고 JSON 데이터를 파싱 하는 데 사용합니다.

두 번째. then은 파싱 된 데이터를 받아 출력하는 데 사용합니다.

마지막으로. catch는 에러가 발생한 경우를 처리하게 됩니다.

 

---

이를 또 비동기 함수로 바꿀 수도 있습니다.

const people = async () => {
    try {
        const res = await fetch("https://swapi.dev/api/1");
        const data = await res.json();
        console.log(data);
    } catch(e) {
        console.log(e)
    }
}