Skip to content

Cum sa faci request-uri HTTP cu fetch API in JavaScript

DodaTech Updated 2025-01-15 2 min read

In this tutorial, you'll learn about Cum sa faci request. We cover key concepts, practical examples, and best practices.

Fetch API este metoda moderna de a face request-uri HTTP in browser. Acest ghid iti arata cum sa trimiti si sa primesti date, sa gestionezi erorile si sa configurezi request-uri complexe.

Quick Fix

1. Request GET simplu

Cel mai simplu request fetch:

fetch('https://api.example.com/users')
    .then(response => response.json())
    .then(users => console.log(users))
    .catch(error => console.error('Eroare:', error));

2. Request POST cu JSON

Trimite date cu metoda POST si header JSON:

async function createUser(userData) {
    try {
        const response = await fetch('https://api.example.com/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer token123'
            },
            body: JSON.stringify(userData)
        });

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

        const newUser = await response.json();
        console.log('Utilizator creat:', newUser);
        return newUser;
    } catch (error) {
        console.error('Creare utilizator esuata:', error.message);
    }
}

await createUser({ name: 'Ion Popescu', email: 'ion@example.com' });

3. Gestionarea erorilor HTTP

fetch nu respinge pentru erori HTTP -- trebuie verificat manual:

async function fetchWithErrorHandling(url) {
    const response = await fetch(url);

    if (!response.ok) {
        const errorBody = await response.text();
        throw new Error(
            `Request esuat: ${response.status} ${response.statusText} - ${errorBody}`
        );
    }

    return response.json();
}

4. Timeout pentru fetch

Fetch nu are timeout nativ. Foloseste AbortController:

async function fetchWithTimeout(url, timeoutMs = 5000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);

    try {
        const response = await fetch(url, { signal: controller.signal });
        clearTimeout(timeoutId);
        return await response.json();
    } catch (error) {
        clearTimeout(timeoutId);
        if (error.name === 'AbortError') {
            throw new Error('Request timeout dupa ' + timeoutMs + 'ms');
        }
        throw error;
    }
}

5. Incarcare de fisiere (multipart/form-data)

Trimite fisiere cu FormData:

async function uploadFile(fileInput) {
    const formData = new FormData();
    formData.append('avatar', fileInput.files[0]);
    formData.append('userId', '123');

    const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
    });

    return response.json();
}

Prevention

  • Verifica response.ok pentru a detecta erori HTTP
  • Foloseste AbortController pentru timeout
  • Seteaza Content-Type corespunzator
  • Gestioneaza atat erorile de retea cat si erorile HTTP

Common Mistakes

  1. A nu verifica response.ok -- fetch respinge doar pentru erori de retea, nu pentru 404 sau 500
  2. A uita sa parsezi corpul raspunsului -- response.json() returneaza un Promise, nu datele direct
  3. A nu trata erorile -- un fetch neacoperit de try/catch poate crapa aplicatia
  4. A trimite body la GET -- request-urile GET nu trebuie sa aiba corp
  5. A uita sa apelezi .json() o singura data -- corpul raspunsului poate fi citit o singura data

FAQ

### De ce fetch nu arunca eroare pentru 404?

Fetch considera ca un request este "reuศ™it" daca serverul a raspuns, indiferent de codul HTTP. Trebuie sa verifici response.ok (status intre 200-299).

Adauga credentials: 'include' in optiuni. Astfel, cookie-urile cross-origin sunt trimise. Pentru acelasi domeniu, credentials: 'same-origin' este default.

Pot anula un fetch in curs?

Da, cu AbortController. Creezi un controller, passezi signal in optiuni si apelezi controller.abort() cand vrei sa anulezi.

Construit de dezvoltatorii Doda Browser, DodaZIP si Durga Antivirus Pro. Instrumentele DodaTech se integreaza perfect cu JavaScript pentru productivitate si securitate sporite.

โ† Previous How to Fix Fetch API Timeout in JavaScript Next โ†’ How to Fix Array.filter Not Working in JavaScript

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Quick Fix