개요

비동기적으로 데이터를 처리하는 것은 웹 개발에서 매우 중요한 요소입니다. 이를 위해 자바스크립트 fetch API를 사용하여 서버로부터 데이터를 가져와 처리할 수 있습니다. 이 문서에서는 fetch API의 기본적인 사용법과 함께 비동기적 데이터 처리를 다룰 것입니다.

fetch API란?

fetch API는 네트워크 요청을 사용하여 서버로부터 리소스를 가져오는 기능을 제공하는 자바스크립트 API입니다. 이 API는 기본적으로 AJAX를 대체하는 새로운 표준으로 자리잡고 있습니다. fetch API를 사용하면 비동기 방식으로 데이터를 가져와 처리할 수 있습니다.

fetch API를 사용하여 데이터 가져오기

fetch() 함수를 사용하여 데이터를 가져옵니다. 이 함수는 Promise 객체를 반환하며, then() 메서드를 사용하여 비동기 호출의 결과를 처리할 수 있습니다. 아래는 fetch API를 사용하여 데이터를 가져오는 예제입니다.

fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직 작성
    console.log(data);
  })
  .catch(error => {
    // 에러 처리 로직 작성
    console.error(error);
  });

위의 예제에서는 ‘https://example.com/api/data’ URL로 GET 요청을 보내고, 가져온 데이터를 JSON 형식으로 변환한 뒤 처리하는 코드입니다. 데이터는 then() 메서드 안에서 처리하여 결과를 활용할 수 있습니다.

fetch API를 사용하여 데이터 전송하기

fetch API를 사용하여 서버로 데이터를 전송하는 방법도 간단합니다. fetch() 함수에 POST 요청의 옵션을 설정하고, 요청 본문에 데이터를 넣어 전송할 수 있습니다. 아래는 데이터를 POST 방식으로 전송하는 예제입니다.

const data = { name: 'John', email: 'john@example.com' };

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then(response => response.json())
  .then(data => {
    // 응답 데이터 처리 로직 작성
    console.log(data);
  })
  .catch(error => {
    // 에러 처리 로직 작성
    console.error(error);
  });

위의 예제에서는 데이터 객체를 생성하고, 이를 JSON 형식으로 변환하여 POST 요청의 본문에 넣어 서버로 전송한 뒤, 응답 데이터를 처리하는 코드입니다.

요약

자바스크립트 fetch API를 사용하여 비동기적으로 데이터를 처리하는 방법에 대해 알아보았습니다. fetch API를 사용하면 네트워크 요청을 비동기적으로 처리할 수 있으며, 가져온 데이터를 처리하거나 서버로 데이터를 전송할 수 있습니다. 이를 통해 웹 개발에서 데이터 처리를 보다 효율적으로 할 수 있습니다.

참고 자료:

• fetch API 문서
• Asynchronous JavaScript