소개

Fetch API는 JavaScript에서 서버와 통신하기 위한 기능을 제공하는 웹 API입니다. Promise와 함께 사용하면 비동기적으로 데이터를 가져올 수 있고, 코드를 더 깔끔하고 효율적으로 작성할 수 있습니다. 이번 글에서는 Promise와 Fetch API를 함께 사용하는 방법에 대해 알아보겠습니다.

Fetch API 기본 사용법

Fetch API는 fetch() 함수를 사용하여 서버로부터 데이터를 가져옵니다. 이 함수는 Promise를 반환하므로 .then() 메소드를 사용하여 비동기적으로 데이터를 처리할 수 있습니다.

다음은 간단한 예제 코드입니다.

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

위 코드에서는 fetch() 함수를 사용하여 서버의 API 엔드포인트로 GET 요청을 보냅니다. 이후 .then() 메소드를 사용하여 응답 데이터를 JSON 형식으로 변환한 다음, 데이터 처리 로직을 수행합니다. 만약 에러가 발생한다면 .catch() 메소드를 사용하여 에러 처리 로직을 수행할 수 있습니다.

POST 요청 보내기

Fetch API를 사용하여 POST 요청을 보내려면 fetch() 함수의 두 번째 인자로 옵션 객체를 전달해야 합니다. 이 객체에 method 속성을 POST로 설정하고, body 속성에 전송할 데이터를 입력합니다.

다음은 POST 요청을 보내는 예제 코드입니다.

fetch('https://api.example.com/data', {
  method: 'POST',
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => {
    // 응답 데이터 처리 로직
  })
  .catch(error => {
    // 에러 처리 로직
  });

위 코드에서는 fetch() 함수의 두 번째 인자로 전송할 데이터를 옵션 객체로 설정하였습니다. JSON.stringify() 함수를 사용하여 데이터를 문자열로 변환한 다음, body 속성에 할당합니다. 서버에서는 이 데이터를 JSON 형식으로 받아 처리할 수 있습니다.

요약

이번 글에서는 Promise와 함께 사용하는 Fetch API의 기본적인 사용 방법에 대해 알아보았습니다. Fetch API는 비동기적으로 서버와 통신하기 위한 강력한 도구이며, Promise와 함께 사용하면 코드를 더 깔끔하고 효율적으로 작성할 수 있습니다. 다양한 옵션을 사용하여 GET 또는 POST 요청을 보낼 수 있으며, 응답 데이터를 처리하거나 에러를 처리하는 로직을 구현할 수 있습니다.

#Promise #FetchAPI