INF.03Frontend & JS
AJAX i Fetch API w JavaScript
Technologia umożliwiająca asynchroniczną wymianę danych z serwerem w tle bez konieczności przeładowywania całej strony internetowej.
Jak działa Fetch API w JavaScript?
Współczesny standard AJAX opiera się na wbudowanej funkcji fetch(), która zwraca obiekt Promise.
JAVASCRIPT
// Pobieranie danych (GET) z async/await:
async function pobierzUzytkownikow() {
try {
const res = await fetch('https://api.example.com/users');
if (!res.ok) throw new Error(`Błąd HTTP: ${res.status}`);
const data = await res.json();
console.log('Pobrani użytkownicy:', data);
} catch (err) {
console.error('Wystąpił błąd sieci:', err);
}
}
// Wysyłanie danych (POST):
async function wyslijFormularz(dane) {
const res = await fetch('/api/zapisz', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(dane)
});
return await res.json();
}Najczęstsze pułapki na egzaminie INF.03:
- Pamiętaj, że odpowiedź z
fetch()wymaga wywołania metody.json()lub.text(), która również jest asynchroniczna i zwraca Promise!
Chcesz sprawdzić to pojęcie w praktyce?
Przeszukaj pytania z oficjalnych arkuszy CKE powiązane z hasłem AJAX i Fetch API w JavaScript lub rozpocznij trening.