Πελάτης για Εφαρμογή στο Redux

Στα προηγούμενα μαθήματα σχεδόν ολοκληρώσαμε τη δουλειά με το διακομιστικό μέρος για την εφαρμογή μας, θα το συμπληρώσουμε λίγο ανάλογα με τις ανάγκες στα επόμενα μαθήματα. Τώρα πρέπει να δημιουργήσουμε έναν πελάτη για την εφαρμογή, ο οποίος θα στέλνει αιτήματα HTTP στον διακομιστή.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα και στον φάκελο api να δημιουργήσουμε το αρχείο client.js. Αρχικά, θα γράψουμε την ίδια τη συνάρτηση client, η οποία θα λειτουργεί τόσο για GET όσο και για POST αιτήματα. Ως παραμέτρους θα λαμβάνει τη διαδρομή, τον τύπο και το σώμα του αιτήματος (στην περίπτωση POST), εάν υπάρχει:

export async function client(url, method, body = {}) {}

Στη συνέχεια, πρέπει να διαμορφώσουμε το αντικείμενο options, στο οποίο θα μεταφέρουμε διάφορες πληροφορίες για το αίτημα. Αυτό θα είναι ο τύπος αιτήματος και οι κεφαλίδες:

export async function client(url, method, body = {}) {
	const options = {
		method: method,
		headers: {
			'Content-Type': 'application/json',
		},
	}
}

Η ιδιότητα body είναι προαιρετική για εμάς, πρέπει να την μεταφέρουμε μόνο αν έχουμε POST αίτημα. Για αυτό, μέσα στην client μετά τον κώδικα για το αντικείμενο options θα την προσθέσουμε στο options με το σώμα του αιτήματος σε μορφή JSON, εάν επιλεγεί η μέθοδος POST:

if (method === 'POST') {
	options.body = JSON.stringify(body)
}

Στη συνέχεια, πιο κάτω στον κώδικα της client, θα οργανώσουμε ένα μπλοκ try, στην πρώτη γραμμή του οποίου χρησιμοποιώντας την fetch θα λάβουμε την απάντηση από τον διακομιστή. Σε περίπτωση αποτυχίας, παραδοσιακά θα επιστρέψουμε μια Promise με σφάλμα:

let data
try {
	const response = await window.fetch(url, options)
} catch (err) {
	return Promise.reject(err.message ? err.message : data)
}

Τώρα ας συμπληρώσουμε τον κώδικα στο μπλοκ try. Αφού λάβουμε την response, πρέπει να την επεξεργαστούμε. Θα εξαγάγουμε από αυτήν τα δεδομένα σε JSON και αν η κατάσταση της απάντησης μας σηματοδοτεί ότι όλα είναι εντάξει, τότε θα επιστρέψουμε ένα αντικείμενο με τα δεδομένα και πληροφορίες: κατάσταση, κεφαλίδες και διεύθυνση. Εάν όμως η κατάσταση δεν είναι 'ok', τότε θα πετάξουμε μια εξαίρεση με το κείμενο της κατάστασης:

try {
	const response = await window.fetch(url, options)
	data = await response.json()
	if (response.ok) {
		return {
			status: response.status,
			headers: response.headers,
			url: response.url,
			data,
		}
	}
	throw new Error(response.statusText)
}

Ο κώδικας για τη συνάρτηση client είναι έτοιμος, απομένει μόνο να γράψουμε πώς θα λειτουργούν οι μέθοδοι μας GET και POST κατά την κλήση. Ας γράψουμε τον κώδικα για αυτές μετά τη συνάρτηση client. Η μέθοδος client.get θα λαμβάνει ως παράμετρο τη διαδρομή και θα καλεί τη συνάρτηση client, περνώντας της αυτή τη διαδρομή και τον τύπο αιτήματος GET:

client.get = (url) => client(url, 'GET')

Και η client.post θα πρέπει να μεταβιβάζει για την client τη διαδρομή, τον τύπο αιτήματος POST και το σώμα του αιτήματος:

client.post = (url, body) => client(url, 'POST', body)

Σε αυτό το σημείο, ο μικρός μας πελάτης είναι έτοιμος για δουλειά με τον διακομιστή.

Ανοίξτε την εφαρμογή σας με τους μαθητές, δημιουργήστε σε αυτήν στον φάκελο api το αρχείο client.js. Αφού μελετήσετε τα υλικά του μαθήματος γράψτε (αντιγράψτε) τον κώδικα της συνάρτησης client και των δύο μεθόδων της client.get και client.post.