2026.08.20.
Kódolás, keretrendszerek

API hívások hibakezelése JavaScript async await-el

Temesvári László

Async/Await hibakezelés JavaScriptben: Profi minták API kommunikációhoz

Bevezetés: Miért fontos a megfelelő hibakezelés?

Amikor webfejlesztéssel vagy WordPress weboldal készítéssel foglalkozunk, az API hívások ma már elkerülhetetlen részei minden modern alkalmazásnak. Gondolj csak arra, amikor egy kisvállalkozás weboldalán megjeleníted az aktuális árfolyamokat, lekérdezed a szállítási költségeket, vagy szinkronizálod a termékkatalógust egy külső rendszerrel. Mindezek működésének alapja a megbízható API kommunikáció – és itt jön képbe a hibakezelés kritikus jelentősége.

Miért érdekelhet ez téged, ha nem vagy fejlesztő? Mert a jól kezelt hibák közvetlenül érintik a weboldalad megbízhatóságát, felhasználói élményét, és végső soron az üzleti eredményeidet. Egy olyan rendszer, amely elegánsan kezeli a szerverhibákat, hálózati problémákat vagy érvénytelen adatokat, nem csak technikailag szofisztikáltabb, hanem üzletileg is sokkal értékesebb.

Mi az az async/await és miért használjuk?

Röviden: az async/await egy modern JavaScript szintaxis, amely lehetővé teszi, hogy aszinkron kódot (például API hívásokat) szinte olyan egyszerűen írhassunk, mintha szinkron kód lenne. Amikor egy WordPress bővítményt fejlesztünk PHP backenddel, és JavaScript frontenddel kommunikálunk, az async/await nélkülözhetetlen eszközzé válik.

// Alap példa async/await használatára
async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Hiba a felhasználói adatok lekérésekor:', error);
        return null;
    }
}

Gyakori buktatók és hogyan kerüljük el őket

1. Az „elnyelt” hibák problémája

A leggyakoribb hiba, amit kezdő és gyakran haladó fejlesztők is elkövetnek, hogy nem kezelik megfelelően a rejected promise-okat. Például, amikor jQuery-val dolgozunk Bootstrap komponensekkel együtt:

// ❌ ROSSZ MINTA - a hiba csendben eltűnik
async function updateProductPrice(productId) {
    const price = await $.get(`/api/products/${productId}/price`);
    $('#price-display').text(price);
}

// ✅ HELYES MINTA - a hiba kezelve van
async function updateProductPriceSafe(productId) {
    try {
        const price = await $.get(`/api/products/${productId}/price`);
        $('#price-display').text(price);
    } catch (error) {
        console.error('Árfolyam frissítési hiba:', error);
        $('#price-display').text('Ár nem elérhető');
        $('#price-error-alert').removeClass('d-none'); // Bootstrap alert megjelenítése
    }
}

2. Több API hívás párhuzamos kezelése

Amikor egy webfejlesztés során több adatforrást kell lekérnünk egyszerre (például termékadatok + felhasználói adatok + készletinformációk):

async function loadDashboardData() {
    try {
        // Párhuzamos hívások Promise.all segítségével
        const [products, user, inventory] = await Promise.all([
            fetch('/api/products').then(r => r.json()),
            fetch('/api/current-user').then(r => r.json()),
            fetch('/api/inventory').then(r => r.json())
        ]);
        
        // Adatok feldolgozása
        renderDashboard({ products, user, inventory });
        
    } catch (error) {
        // Kezeljük a részleges sikertelenséget is
        if (error.results) {
            // Néhány hívás sikeres volt
            handlePartialSuccess(error.results);
        } else {
            showErrorNotification('Az adatok betöltése sikertelen');
        }
    }
}

PHP backend és JavaScript frontend integrációja

Egy valós példa, ahol PHP backend API-t szolgáltat és JavaScript kezeli a kliens oldalt:

query('SELECT id, name, price FROM products WHERE active = 1');
    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    echo json_encode([
        'success' => true,
        'data' => $products,
        'timestamp' => time()
    ]);
    
} catch (Exception $e) {
    http_response_code(500);
    echo json_encode([
        'success' => false,
        'error' => 'Adatbázis hiba történt',
        'debug' => DEBUG_MODE ? $e->getMessage() : null
    ]);
}
?>
// JavaScript frontend - SCSS stílusokkal Bootstrap keretrendszerben
async function loadProducts() {
    const productsContainer = $('#products-container');
    const loadingSpinner = $('#loading-spinner');
    
    try {
        loadingSpinner.removeClass('d-none');
        
        const response = await fetch('/api/products.php');
        const result = await response.json();
        
        if (!result.success) {
            throw new Error(result.error || 'Ismeretlen hiba');
        }
        
        // Sikeres adatbetöltés - megjelenítés
        productsContainer.empty();
        result.data.forEach(product => {
            productsContainer.append(`
                <div class="col-md-4 mb-4">
                    <div class="card product-card">
                        <div class="card-body">
                            <h5 class="card-title">${product.name}</h5>
                            <p class="card-text price">${formatPrice(product.price)}</p>
                        </div>
                    </div>
                </div>
            `);
        });
        
    } catch (error) {
        // Hibakezelés felhasználóbarát módon
        productsContainer.html(`
            <div class="col-12">
                <div class="alert alert-danger" role="alert">
                    <h4 class="alert-heading">Hiba történt!</h4>
                    <p>A termékek betöltése sikertelen. Kérjük, próbálja újra később.</p>
                    <button class="btn btn-outline-danger btn-sm">
                        Újrapróbálkozás
                    </button>
                </div>
            </div>
        `);
        
        // Hibanaplózás fejlesztőknek
        console.error('Termékbetöltési hiba:', error);
        
    } finally {
        // Mindig fusson le, akár sikeres, akár sikertelen volt a kérés
        loadingSpinner.addClass('d-none');
    }
}

// SCSS stílus a termék kártyákhoz (külön fájlban)
// .product-card {
//   transition: transform 0.3s ease;
//   &:hover {
//     transform: translateY(-5px);
//     box-shadow: 0 4px 15px rgba(0,0,0,0.1);
//   }
//   .price {
//     color: #28a745;
//     font-weight: bold;
//     font-size: 1.2rem;
//   }
// }

Haladó minták API hibakezelésre

1. Újrapróbálkozási mechanizmus

async function fetchWithRetry(url, options = {}, maxRetries = 3) {
    for (let i = 0; i  setTimeout(resolve, delay));
            console.log(`Újrapróbálkozás ${i + 1}/${maxRetries}`);
        }
    }
}

2. Időtúllépés kezelése

async function fetchWithTimeout(url, options = {}, timeout = 5000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);
    
    try {
        const response = await fetch(url, {
            ...options,
            signal: controller.signal
        });
        clearTimeout(timeoutId);
        return await response.json();
    } catch (error) {
        clearTimeout(timeoutId);
        if (error.name === 'AbortError') {
            throw new Error('A kérés túllépte az időkeretet');
        }
        throw error;
    }
}

Összegzés: Miért éri meg erre időt szánni?

A megfelelő async/await hibakezelés nem csak technikai kérdés. Egy jól megírt hibakezelési stratégia:

1. Növeli a felhasználói élményt: A felhasználók nem találkoznak „fehér képernyővel” vagy megmagyarázhatatlan hibákkal 2. Csökkenti a támogatási költségeket: Kevesebb panasz érkezik, mert a rendszer informálja a felhasználót a problémáról 3. Javítja a megbízhatóságot: A részleges leállások is kezelhetővé válnak 4. Könnyíti a hibakeresést: Részletes hibanaplók segítenek a problémák gyors lokalizálásában

Akár egy egyszerű WordPress weboldalt készítesz, akár egy komplex vállalati rendszert fejlesztesz, az async/await hibakezelési minták bevonása a fejlesztési folyamatba hosszú távon időt és pénzt takarít meg. A kulcs a következetesség: határozz meg egy stratégiát, dokumentáld, és alkalmazd az egész projektben.

*Egy jól kezelt hiba nem csak egy technikai részlet – az a pont, ahol a felhasználó dönti el, hogy visszatér-e az oldaladra, vagy örökre eltűnik.*

A weboldalon megjelenő szöveges és vizuális tartalmak előállításához mesterséges intelligenciát (AI) használunk.

Kapcsolódó cikkek