let url = 'https://jsonplaceholder.typicode.com/posts/3';

fetch(url)                                      // 1. call fetch with a URL
    .then(response => response.json())          // 2. read the response body
    .then(json => console.log(json.title));     // 3. process the data

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'Post title!',
    body: 'Lorem ipsum odor amet, consectetuer adipiscing elit. Feugiat habitasse sodales efficitur ornare mollis parturient. Vehicula lobortis quisque ultricies magnis vulputate habitant curae porta mi. Ultrices egestas orci class elit dictum.',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

let postUrl = 'https://jsonplaceholder.typicode.com/posts';
let request = new Request(postUrl, {
    method: 'POST',
    body: JSON.stringify({
        title: 'Post title!',
        body: 'Lorem ipsum odor amet, consectetuer adipiscing elit. Feugiat habitasse sodales efficitur ornare mollis parturient. Vehicula lobortis quisque ultricies magnis vulputate habitant curae porta mi. Ultrices egestas orci class elit dictum.',
        userId: 1,
    }),
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
    },
});

fetch(request)
    .then(response => response.json())
    .then(json => console.log(json));

let url = 'https://jsonplaceholder.typicode.com/posts/1';
let request = new Request(url, {
    method: 'GET',
    headers: {
        'Content-type': 'application/json; charset=UTF-8'
    },
});

fetch(request)
    .then(resp => resp.json())
    .then(json => console.log(json));

document.getElementById('userForm').addEventListener('submit', async function (event) {
    event.preventDefault(); // Prevent page reload

    // Create URLSearchParams object and append form data
    const formData = new URLSearchParams();
    formData.append('name', document.getElementById('name').value);
    formData.append('email', document.getElementById('email').value);

    try {
        // Send the form data to the REST API
        const response = await fetch('https://example.com/api/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: formData.toString() // Convert URLSearchParams to string
        });

        // Handle response
        if (response.ok) {
            document.getElementById('responseMessage').textContent = 'User successfully added!';
        } else {
            document.getElementById('responseMessage').textContent = 'Failed to add user.';
        }
    } catch (error) {
        console.error('Error:', error);
        document.getElementById('responseMessage').textContent = 'An error occurred.';
    }
});

url.href                // 'https://example.com:8080/path/name?q=term&key=value#fragment'
url.origin              // https://example.com:8080
url.protocol            // https:
url.host                // example.com:8080
url.hostname            // example.com
url.port                // 8080
url.pathname            // /path/name
url.search              // ?q=term&key=value
url.hash                // #fragment
url.toString()          // https://example.com:8080/path/name?q=term&key=value#fragment

let url = new URL('https://example.com/search');
url.searchParams.append('key', 'value');            // add new key/value pair
url.searchParams.set('key', 'new-value');           // change value for 'key'
url.searchParams.get('key')                         // return value for 'key'
url.searchParams.has('key')                         // Boolean, whether 'key' exists
url.searchParams.append('opts', 'extra-values');    // add new key/value pair
url.searchParams.append('opts', 'more-values');     // add another pair with the same key
url.searchParams.getAll('opts')                     // return all values for 'opts'
url.searchParams.sort()                             // sort all pairs by key name
url.searchParams.delete('opts');                    // delete all pairs with 'opts' key

let url = new URL('https://example.com/search');
let params = new URLSearchParams();
params.append('one', 'value');
params.append('key', 'pair');
url.search = params;

// iterate through all headers
let logResponseHeaders = responseObject => {
    for (let [name, value] of responseObject.headers) {
        console.log(`Header "${name}": ${value}`);
    }
};

let postUrl = 'https://jsonplaceholder.typicode.com/posts';

fetch(postUrl, {
    method: 'POST',
    body: JSON.stringify({
        title: 'My title',
        body: 'This is the request body!',
        userId: 1,
    }),
    headers: {
        'Content-Type': 'application/json; charset=UTF-8',
    }
})
    .then(resp => resp.json())
    .then(json => console.log(json));

let postByUser = (userId) => {
    let url = new URL('https://jsonplaceholder.typicode.com/posts');
    url.searchParams.set('userId', userId);
    fetch(url)
        .then(response => response.json())
        .then(data => console.log(data));
};

postByUser(1);

let authHeaders = new Headers();                                                // create Headers obj
authHeaders.set('Authorization', `Basic ${btoa(`${username}:${password}`)}`);   // .set() method

fetch('https://jsonplaceholder.typicode.com/posts',
    { headers: authHeaders })
    .then(response => response.json())
    .then(json => console.log(json.body));

// WRONG — logs the 404 body as if the request succeeded
fetch('/api/missing')
    .then(res => res.json())
    .then(data => console.log(data));

// CORRECT — check ok before reading the body
async function getUser(id) {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) {
        throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    }
    return res.json();
}

fetch(url)
    .then(response => {
        let contentType = response.headers.get('Content-Type');
        if (response.ok && contentType.includes('application/json')) {
            return response.json();
        } else {
            throw new Error(`Unexpected response status ${response.status} or content type`);
        }
    })
    .then(data => console.log(data.body))                               // when resp body resolves, log it
    .catch(error => console.log('Error while fetching post', error));   // handle error

const response = await fetch('/api/large-file');

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

const reader = response.body.getReader();
const decoder = new TextDecoder();
let received = 0;

while (true) {
    const { done, value } = await reader.read();

    if (done) break;

    received += value.length;
    console.log(`Received ${received} bytes`);
    console.log(decoder.decode(value, { stream: true }));
}

let fileInput = document.querySelector('#myfile');

fileInput.addEventListener('change', (e) => {
    if (fileInput.files.length === 0) {             // handle no file when form submitted
        message.textContent = "Upload a file!";
        return;
    }

    const file = fileInput.files[0];                // get uploaded file

    let formData = new FormData();                  // create new FormData obj
    formData.append(file.name, file);               // add uploaded file to formData obj

    fetch('path/to/upload', {                       // send file w/fetch
        method: "POST",
        body: formData
    });
});

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5-second timeout

fetch(url, {
    method: 'GET',
    signal: controller.signal // Attach the AbortController signal
})
    .then(response => response.json())
    .then(json => console.log('Success:', json))
    .catch(error => {
        if (error.name === 'AbortError') {
            console.error('Request timed out');
        } else {
            console.error('Fetch error:', error);
        }
    })
    .finally(() => clearTimeout(timeoutId));

async function fetchWithRetry(url, options = {}, maxRetries = 3, baseDelay = 500) {
    for (let attempt = 1; attempt <= maxRetries; attempt++) {
        try {
            const res = await fetch(url, options);

            if (res.ok) return res;

            // Retry on rate limit or server error — not on client errors (4xx)
            if (res.status === 429 || res.status >= 500) {
                if (attempt === maxRetries) throw new Error(`HTTP ${res.status} after ${maxRetries} retries`);
                const delay = baseDelay * 2 ** (attempt - 1);   // 500ms, 1s, 2s…
                await new Promise(r => setTimeout(r, delay));
                continue;
            }

            throw new Error(`HTTP ${res.status}`);  // 4xx — do not retry
        } catch (err) {
            if (attempt === maxRetries) throw err;
            await new Promise(r => setTimeout(r, baseDelay * 2 ** (attempt - 1)));
        }
    }
}

// Usage
try {
    const res = await fetchWithRetry('/api/reports', { method: 'GET' });
    const data = await res.json();
} catch (err) {
    console.error('Request failed after all retries:', err.message);
}

const api = (() => {
    const BASE = 'https://api.example.com/v1';

    async function request(method, path, body = null) {
        const token = localStorage.getItem('auth_token');

        const res = await fetch(`${BASE}${path}`, {
            method,
            headers: {
                'Content-Type': 'application/json',
                ...(token && { 'Authorization': `Bearer ${token}` }),
            },
            body: body ? JSON.stringify(body) : null,
        });

        if (!res.ok) {
            // Try to read an error message from the response body
            const err = await res.json().catch(() => ({ message: res.statusText }));
            throw new Error(err.message ?? `HTTP ${res.status}`);
        }

        return res.status === 204 ? null : res.json();  // 204 No Content has no body
    }

    return {
        get:    (path)        => request('GET',    path),
        post:   (path, body)  => request('POST',   path, body),
        put:    (path, body)  => request('PUT',    path, body),
        patch:  (path, body)  => request('PATCH',  path, body),
        delete: (path)        => request('DELETE', path),
    };
})();

// Clean call sites — no headers, no ok checks, no base URL
const users = await api.get('/users');
const created = await api.post('/users', { name: 'Alice', role: 'admin' });
await api.delete('/users/42');

const source = new EventSource('/api/notifications');

source.addEventListener('message', (event) => {
    console.log('New notification:', event.data);
});

source.addEventListener('error', () => {
    console.error('SSE connection lost — browser will reconnect automatically');
});

// Close the connection when it is no longer needed
source.close();

const socket = new WebSocket('wss://chat.example.com/room/42');

socket.addEventListener('open', () => {
    console.log('Connected to chat server');
    socket.send(JSON.stringify({ type: 'join', username: 'alice' }));
});

socket.addEventListener('message', (event) => {
    const message = JSON.parse(event.data);
    console.log(`${message.username}: ${message.text}`);
});

socket.addEventListener('close', () => {
    console.log('Disconnected from chat server');
});

socket.addEventListener('error', (event) => {
    console.error('WebSocket error:', event);
});