Fetch API와 AJAX

npx json-server --watch db.json --port 4000

// // fetch API가 없을 때의 XMLHttpRequest 사용 예시 (간략)
// function fetchDataXHR() {
//     const xhr = new XMLHttpRequest();
//     xhr.open('GET', 'http://localhost:4000/posts/1'); // 요청 초기화
//     xhr.onload = function() { // 응답이 로드되었을 때 (성공)
//         if (xhr.status >= 200 && xhr.status < 300) {
//             console.log("XHR 응답 성공:", JSON.parse(xhr.responseText));
//         } else {
//             console.error("XHR 응답 실패:", xhr.status);
//         }
//     };
//     xhr.onerror = function() { // 요청 실패 (네트워크 오류 등)
//         console.error("XHR 네트워크 오류 발생");
//     };
//     xhr.send(); // 요청 전송
// }
// fetchDataXHR();

// GET 요청 예시
fetch('http://localhost:4000/posts/1') // Promise 반환
    .then(response => {
        // 응답 상태 확인: response.ok는 200-299 상태 코드를 나타냄
        if (!response.ok) {
            throw new Error(`HTTP 오류! 상태: ${response.status}`);
        }
        // 응답 본문을 JSON으로 파싱 (Promise 반환)
        return response.json();
    })
    .then(data => {
        console.log("Fetch GET 응답 데이터:", data);
    })
    .catch(error => {
        console.error("Fetch 요청 실패:", error);
    });

// POST 요청 예시
const newPost = {
    title: '새로운 게시물',
    body: '이것은 Fetch API로 작성된 새로운 게시물 내용입니다.',
    userId: 1,
};

fetch('http://localhost:4000/posts', {
    method: 'POST', // HTTP 메서드 지정
    headers: {
        'Content-Type': 'application/json; charset=UTF-8', // 요청 헤더 지정
    },
    body: JSON.stringify(newPost), // 전송할 데이터 (JSON.stringify로 문자열화)
})
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP 오류! 상태: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log("Fetch POST 응답 데이터 (생성된 게시물):", data);
    })
    .catch(error => {
        console.error("Fetch POST 요청 실패:", error);
    });

async function fetchUserData(userId) {
    try {
        const response = await fetch(`http://localhost:4000/users/${userId}`);

        if (!response.ok) {
            throw new Error(`사용자 데이터를 불러오는 데 실패했습니다. ${response.status}`);
        }

        const userData = await response.json();
        console.log("사용자 데이터:", userData);
        return userData;
    } catch (error) {
        console.error("데이터 로딩 중 오류 발생:", error);
        return null;
    }
}

fetchUserData(1); // ID가 1인 사용자 데이터 가져오기
fetchUserData(999); // 존재하지 않는 사용자 (오류 처리 테스트)

const controller = new AbortController();
const signal = controller.signal;

async function fetchWithCancellation(url) {
    try {
        const response = await fetch(url, { signal });
        if (!response.ok) {
            throw new Error(`HTTP 오류! 상태: ${response.status}`);
        }
        const data = await response.json();
        console.log("데이터 로드 성공:", data);
        return data;
    } catch (error) {
        if (error.name === 'AbortError') {
            console.log("Fetch 요청이 취소되었습니다.");
        } else {
            console.error("Fetch 요청 오류:", error);
        }
        return null;
    }
}

// 50ms 후에 요청 취소를 시도하는 예시
const longRunningFetch = fetchWithCancellation('http://localhost:4000/posts/1');

setTimeout(() => {
    controller.abort(); // 요청 취소
}, 50); // 먼저 완료되면 취소되지 않을 수 있음

{
  "posts": [{ "id": 1, "title": "첫 글", "body": "본문", "userId": 1 }],
  "users": [{ "id": 1, "name": "민지" }]
}

async function readPosts(response) {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const type = response.headers.get('content-type') ?? '';
    if (!/^application\/json(?:\s*;|\s*$)/i.test(type)) {
        throw new Error('JSON 응답 형식이 아닙니다.');
    }
    const data = await response.json();
    const validPost = post => post !== null && typeof post === 'object'
        && (typeof post.id === 'number' || typeof post.id === 'string')
        && typeof post.title === 'string';
    if (!Array.isArray(data) || !data.every(validPost)) {
        throw new Error('글 목록의 구조가 다릅니다.');
    }
    return data;
}

async function showPosts() {
    try {
        const response = await fetch('http://localhost:4000/posts');
        const posts = await readPosts(response);
        console.log(posts.length === 0 ? 'empty' : 'success', posts);
    } catch (error) {
        console.log('error', error.message);
    }
}

function createPostsLoader(show, request = fetch) {
    let current = 0;
    let previous;

    async function load(url) {
        const token = ++current;
        previous?.abort();
        const controller = new AbortController();
        previous = controller;
        show('pending');
        try {
            const response = await request(url, { signal: controller.signal });
            const posts = await readPosts(response);
            if (token !== current) return;
            if (controller.signal.aborted) { show('canceled'); return; }
            show(posts.length === 0 ? 'empty' : 'success', posts);
        } catch (error) {
            if (token !== current) return;
            show(controller.signal.aborted ? 'canceled' : 'error', error.message);
        }
    }

    return { load, cancel: () => previous?.abort() };
}

const loader = createPostsLoader((state, value) => console.log(state, value));
// 준비된 Mock API에서 실행: loader.load('http://localhost:4000/posts');