자바스크립트 Fetch API, 네트워크 요청과 응답 관리

자바스크립트 Fetch API, 네트워크 요청과 응답 관리

웹 애플리케이션 개발에서 서버와의 비동기 통신은 매우 중요합니다. Fetch API는 이러한 비동기 통신을 단순하고 유연하게 처리할 수 있도록 도와주는 최신 자바스크립트 API입니다. 이 글에서는 Fetch API의 기본 사용법부터 고급 활용법까지 살펴보겠습니다.

 

 

목차

1. Fetch API란?
2. 기본 사용법
3. 요청 설정하기
4. 응답 처리하기
5. 에러 처리
6. 고급 사용법
7. 결론

 

Fetch API란?

Fetch API는 자바스크립트를 사용하여 네트워크 요청을 보내고 응답을 처리하는 인터페이스입니다. 이 API는 프로미스를 기반으로 설계되어 비동기 작업을 더욱 간편하게 관리할 수 있습니다.

 

 

기본 사용법

fetch 함수는 네트워크 요청을 보내고 프로미스를 반환합니다. 기본 사용법은 매우 간단합니다.

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

위 코드에서는 https://api.example.com/data로 GET 요청을 보내고, 응답을 JSON으로 파싱하여 콘솔에 출력합니다.

 

 

요청 설정하기

fetch 함수는 두 번째 인자로 옵션 객체를 받아 요청을 설정할 수 있습니다.

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

위 코드에서는 POST 요청을 보내고, JSON 형식의 데이터를 서버로 전송합니다.

 

 

응답 처리하기

응답 객체는 HTTP 응답에 대한 다양한 정보를 담고 있습니다. 이를 통해 상태 코드, 헤더 등을 확인할 수 있습니다.

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

위 코드에서는 응답 상태를 확인하고, 에러가 발생하면 예외를 던집니다.

 

 

에러 처리

fetch 요청에서 발생하는 에러를 처리하기 위해 catch 블록을 사용할 수 있습니다.

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Fetch error:', error));

위 코드에서는 네트워크 요청 중 발생한 모든 에러를 처리하고, 콘솔에 에러 메시지를 출력합니다.

 

 

 

 

고급 사용법

Fetch API는 쿠키, 인증 헤더 등을 포함한 다양한 고급 기능을 지원합니다. 예를 들어, 인증 토큰을 포함하여 요청을 보낼 수 있습니다.

fetch('https://api.example.com/data', {
    headers: {
        'Authorization': 'Bearer YOUR_TOKEN_HERE'
    }
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

위 코드에서는 인증 토큰을 헤더에 포함하여 요청을 보내고, 응답을 처리합니다.

 

 

결론

Fetch API는 자바스크립트로 네트워크 요청을 관리하는 강력하고 유연한 방법을 제공합니다. 기본 사용법에서부터 고급 기능까지 숙지하면 다양한 네트워크 작업을 효율적으로 처리할 수 있습니다. 이 가이드를 통해 Fetch API를 활용하여 웹 애플리케이션을 더욱 향상시킬 수 있기를 바랍니다.