Modern JavaScript Fetch API: Async/Await, Error Handling & API Integration

Robust Asynchronous Requests

Always verify response.ok when using the Fetch API, as 4xx and 5xx responses resolve normally rather than triggering catch blocks:

async function fetchCalculatorData(slug) {
    try {
        const response = await fetch(`/api/v1/calculators/${encodeURIComponent(slug)}`);
        if (!response.ok) {
            throw new Error(`HTTP Error: ${response.status}`);
        }
        const result = await response.json();
        return result.data;
    } catch (err) {
        console.error('Fetch failed:', err.message);
        throw err;
    }
}