Η εγγενής συνάρτηση fetch() της JavaScript παρέχει μια ασύγχρονη διεπαφή για την ανάκτηση πόρων δικτύου σε σύγχρονους περιηγητές και στο Node.js.
Βασικά Αιτήματα
Αίτημα GET (JSON)
async function loadUserData() {
const response = await fetch('https://api.example.com/user/1');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
}
Αίτημα POST (Αποστολή JSON)
async function createUser(payload) {
const response = await fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(payload)
});
return await response.json();
}
Αποστολή Δεδομένων Φόρμας (multipart/form-data)
const formData = new FormData();
formData.append('username', 'alice');
formData.append('avatar', fileInput.files[0]);
// Παραλείψτε την κεφαλίδα Content-Type ώστε ο περιηγητής να ορίσει αυτόματα τα όρια
await fetch('/upload', {
method: 'POST',
body: formData
});
Ακύρωση Αιτημάτων και Χρονικά Όρια (AbortController)
const controller = new AbortController();
const signal = controller.signal;
// Αυτόματη ακύρωση αιτήματος μετά από 5 δευτερόλεπτα
const timeoutId = setTimeout(() => controller.abort(), 5000);
try {
const res = await fetch('https://api.example.com/data', { signal });
const data = await res.json();
clearTimeout(timeoutId);
return data;
} catch (err) {
if (err.name === 'AbortError') {
console.warn('Το αίτημα έληξε λόγω χρονικού ορίου ή ακυρώθηκε');
} else {
console.error('Fetch error:', err);
}
}
Επικεφαλίδες, Αυθεντικοποίηση και Διαπιστευτήρια
const headers = new Headers();
headers.set('Authorization', 'Bearer token_xyz123'); // Επικεφαλίδα αυθεντικοποίησης Bearer Token
headers.set('X-Custom-Header', 'custom-value');
const response = await fetch('/api/secure', {
headers,
credentials: 'include' // Συμπερίληψη cookies σε αιτήματα διαφορετικής προέλευσης
});