JavaScript 에센셜 | 위니북스

fetch API

1. Fetch API

XMLHttpRequest를 대체할 새로운 API가 바로 fetch 입니다. fetch는 여러가지 뜻이 있지만 여기서는 ‘가져오다, 찾아내다’의 의미로 사용되고 있습니다. fetch API를 이용하여 손쉽게 AJAX 통신을 할 수 있습니다.

fetch는 네트워크 요청을 보내는 메소드로, XHR과 비슷한 역할을 합니다. 하지만 XHR과 fetch의 가장 큰 차이점은 XMLHttpRequest가 생성하는 인스턴스는 통신의 기능을 수행하는 XMLHttpRequest 객체를 반환했습니다.

fetch는 인스턴스를 만들지 않고, 대신 Promise을 반환한다는 것입니다.

2. Fetch API 사용해보기

fetch의 기본 사용법은 다음과 같습니다. fetch 함수는 첫 번째 인자로 URL을 받고, 두 번째 인자로 옵션 객체를 받습니다. 옵션 객체에는 네트워크 요청에 대한 설정 정보를 담고 있습니다. 이렇게 fetch 함수를 호출하면 Promise 객체가 반환됩니다.

fetch(url);
fetch(url, option);

fetch(url);
fetch(url, option);

option을 생략하면 자동으로 GET 요청을 보내게 됩니다. option 객체에는 method, headers, body 등의 속성을 설정할 수 있습니다.

속성	설명
method	HTTP 요청 메소드를 지정합니다. GET, POST, PUT, DELETE 등이 있습니다.
headers	HTTP 요청의 헤더로, 메타데이터를 지정합니다.
body	HTTP 요청의 바디로, 전송하려는 실제 데이터를 포함합니다.

// GET
fetch('https://eduapi.weniv.co.kr/1/login_user_info');
 
// POST
fetch('https://eduapi.weniv.co.kr/1/signup', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: 'weniv',
    password: '1234',
  }),
});

// GET
fetch('https://eduapi.weniv.co.kr/1/login_user_info');
 
// POST
fetch('https://eduapi.weniv.co.kr/1/signup', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: 'weniv',
    password: '1234',
  }),
});

fetch를 사용하여 JSON 데이터를 가져오는 예제를 살펴보겠습니다.

let result = fetch(
  'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json',
);
console.log(result);

let result = fetch(
  'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json',
);
console.log(result);

fetch는 함수처럼 바로 실행할 수 있습니다. XHR 객체에 비해 무척 간단하죠? fetch 함수를 실행하면 바로 인자로 전달한 url에 접근해 데이터를 요청하게 됩니다. 그러나 fetch 함수는 즉시 프로미스를 반환합니다. 이 프로미스는 네트워크 요청이 완료되면 fulfilled 상태가 됩니다. 반대로 fetch 함수는 네트워크 오류가 발생하면 rejected 상태의 프로미스를 반환합니다.

result를 콘솔창에 출력해보면 promise 객체가 보입니다. 비동기 처리를 위해 then과 catch 메소드를 사용할 수 있습니다.

let result = fetch(
  'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json',
);
 
result
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

let result = fetch(
  'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json',
);
 
result
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

fulfilled 상태의 프라미스를 반환하기 때문에 then을 통해 데이터를 확인할 수 있습니다. 콘솔창에 응답 결과를 출력해보면 Response 라는 객체가 출력됩니다. Response는 요청에 대한 종합적인 응답 정보가 저장되어 있는 객체 입니다.

우리가 필요한것은 JSON 데이터이기 때문에 .json() 메소드를 통해 응답 본문을 JSON 형식으로 파싱할 수 있습니다. json() 메서드는 비동기적을로 동작하며, 파싱된 JSON 데이터를 resolve하는 프로미스 객체를 반환합니다. 따라서 then 메서드를 이용하여 파싱된 데이터를 처리할 수 있습니다.

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;
  })
  .catch((error) => {
    console.error(error);
  });

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;
  })
  .catch((error) => {
    console.error(error);
  });

response.ok response.ok 는 응답이 성공적(200-299)일 경우 true, 아닌 경우 false를 반환합니다. fetch는 네트워크 통신이 완료되면 fulfilled 상태의 프로미스가 반환되는데 왜 이런 예외처리가 필요할까요? fetch에서 fulfilled 상태의 프로미스가 반환되는 것은 네트워크 통신이 성공적으로 완료되었다는 것을 의미합니다. 이는 단순히 서버로부터 응답을 받았음을 의미합니다. 즉, 404나 500과 같은 HTTP 응답 코드가 반환되었을 때도 fulfilled 상태의 프로미스가 반환됩니다. 개발자가 의도한 데이터를 응답받지 못했어도 서버와의 통신 자체는 성공했기 때문에 약속이 이행되었다고 판단됩니다. 따라서 사용자가 의도한 데이터를 무사히 전달받기 위해서는 response.ok를 이용한 예외처리가 필수적입니다.