자바스크립트 Fetch 함수 : API로 데이터 가져오기

fetch 함수는 웹 API를 통해 네트워크 리소스를 가져오는데 사용되는 JavaScript의 함수입니다. 이 함수는 Promise를 반환하며, 비동기적으로 네트워크 리소스를 요청하고 응답을 처리할 수 있도록 합니다.

Fetch 함수

다음 코드 예제를 통해 Fetch 함수의 작동을 확인 할 수 있습니다.

fetch(url)
  .then((res) => res.json())
  .then((data) => {
    let dataExample = data["dataKey"]["row"];
    console.log(dataExample);
  });

1 fetch(url): 주어진 url로부터 데이터를 가져오는 네트워크 요청을 시작합니다. fetch는 Promise를 반환하며, 비동기적으로 요청이 완료될 때까지 기다리게 됩니다.

2 .then((res) => res.json()): 첫 번째 then은 네트워크 요청에 대한 응답(res)을 받아서, res.json()을 호출하여 JSON 형식으로 파싱합니다. res.json() 역시 Promise를 반환하므로, 다음 .then 블록에서 이를 처리할 수 있습니다.

3 .then((data) => { /* ... */ }): 두 번째 then은 앞선 단계에서 얻은 JSON 데이터(data)를 받아 처리합니다. 이 블록에서는 데이터를 가공하거나 원하는 형태로 변환하는 등의 작업을 수행할 수 있습니다.

Fetch 함수 실패 시

위에서 언급했듯이 fetch 함수는 Promise를 반환하며, 이는 실패 시에 대한 콜백 함수도 구현 할 수 있다는 뜻입니다.

아래 예제 코드를 보면 fetch 실패 시 콜백 함수를 확인 할 수 있습니다.

// 예제로 사용할 잘못된 API 엔드포인트
const apiUrl = 'https://jsonplaceholder.typicode.com/invalidEndpoint';

// fetch를 이용하여 JSON 데이터를 가져오고, 성공 또는 실패에 따라 처리합니다.
fetch(apiUrl)
  .then(res => {
    // HTTP 응답 코드가 200 OK인 경우에만 데이터를 반환합니다.
    if (!res.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json(); // JSON 데이터를 반환합니다.
  })
  .then(data => {
    // 성공적으로 데이터를 가져왔을 때의 동작
    console.log('Fetched Data:', data);
  })
  .catch(error => {
    // Promise 체인에서 어떤 이유로든 에러가 발생했을 때 동작
    console.error('Error:', error.message);
  });

Promise 객체는 일반적으로 성공 시 .then() 메소드를 이용하여 처리하고, 실패 시 .catch() 메소드를 이용하여 처리하는 구조를 가지고 있습니다. 이를 “Promise 체이닝”이라고 부릅니다.

이러한 구조는 fetch 함수 뿐만 아니라, Promise를 반환하는 대부분의 비동기 작업에서 사용됩니다. 예를 들어, 파일을 읽는 FileReader 객체, 데이터베이스 작업, 서버와의 통신 등에서도 비슷한 패턴을 사용합니다.

참고할 만한 글

자바스크립트 콜백 (callbacks)

콜백은 함수를 다른 함수의 인자로 전달하여, 특정 이벤트가 발생하거나 특정 작업이 완료되면 실행되도록 하는 메커니즘입니다. 이를 통해 비동기적인 작업이나 이벤트 처리 등에 유용하게 활용됩니다.