[JavaScript] fetch API 기본 통신 방법

JavaScript의 Fetch API는 네트워크 요청을 위한 인터페이스이다.

XMLHttpRequest를 대체하여 더 간단하고 유연한 방법으로 HTTP 통신을 할 수 있게 해준다.

 

---

1. fetch API 지원 브라우저

 

fetch API는 웹 브라우저에서 제공하는 네이티브 JavaScript API로, 서버와의 HTTP 통신을 Promise 기반으로 처리할 수 있게 해준다.

• IE를 제외한 모든 브라우저에서 지원

 

---

2. fetch API 사용 방법

 

2-1. GET 방식 구현

// 기본 GET 요청 - Promise 체인 방식
// jsonplaceholder는 샘플 데이터를 제공하는 무료 온라인 REST API 
fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        // 응답이 성공적인지 확인
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        // JSON 형태로 응답 데이터 파싱
        return response.json();
    })
    .then(data => {
        // 파싱된 데이터 사용
        console.log('게시글 제목:', data.title);
        console.log('게시글 내용:', data.body);
    })
    .catch(error => {
        // 에러 처리
        console.error('데이터를 가져오는 중 오류 발생:', error);
    });

결과

• fetch() 함수는 URL을 매개변수로 받아 Promise를 반환
• response.ok 는 HTTP 상태코드가 200~299 범위인지 확인
• response.json()은 응답 본문을 JSON으로 파싱하여 Promise를 번환한다.

 

 

 

2-2. POST 방식 구현

// JSON 데이터를 POST로 전송
async function createPost() {
    const postData = {
        title: '새로운 게시글',
        body: '게시글 내용',
        userId: 1
    };

    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
            method: 'POST', // HTTP 메서드 지정
            headers: {
                'Content-Type': 'application/json', // 전송할 데이터 타입 명시
                'Authorization': 'Bearer your-token-here' // 인증 토큰 (필요시)
            },
            body: JSON.stringify(postData) // JavaScript 객체를 JSON 문자열로 변환
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();
        console.log('생성된 게시글:', result);
        return result;

    } catch (error) {
        console.error('게시글 생성 실패:', error);
        throw error;
    }
}

createPost();

결과 값

• method: POST로 HTTP 메서드를 지정
• headers에서 Content-Type과 인증 정보를 설정한다.
• JSON.stringify()로 JavaScript 객체를 JSON 문자열로 변환