Client pour l'application dans Redux

Lors des leçons précédentes, nous avons presque terminé la partie serveur de notre application, nous la compléterons un peu si nécessaire dans les prochaines leçons. Maintenant, nous devons créer un client pour l'application, qui enverra des requêtes HTTP au serveur.

Ouvrons notre application avec les produits et dans le dossier api créons le fichier client.js. Pour commencer, nous écrirons la fonction client elle-même, qui fonctionnera à la fois pour les requêtes GET et POST. Elle recevra en paramètres le chemin, le type et le corps de la requête (dans le cas POST), si il y en a un :

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

Ensuite, nous devons former l'objet options, dans lequel nous transmettrons diverses informations pour la requête. Ce sera le type de requête et les en-têtes :

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

La propriété body est optionnelle pour nous, nous devons la transmettre si nous avons une requête POST. Pour cela, à l'intérieur de client après le code pour l'objet options, ajoutons-la à options avec le corps de la requête au format JSON, si la méthode POST est sélectionnée :

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

Ensuite, plus bas dans le code de client, organisons un bloc try, dans la première ligne duquel nous obtiendrons la réponse du serveur en utilisant fetch. En cas d'échec, nous retournerons traditionnellement une promesse avec une erreur :

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

Maintenant, complétons le code dans le bloc try. Après avoir obtenu la response, nous devons la traiter. Extrayons-en les données en JSON et si le statut de la réponse nous indique que tout est en ordre, alors retournons un objet avec les données et les informations : statut, en-têtes et adresse. Si le statut n'est pas 'ok', alors levons une exception avec le texte du statut :

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)
}

Le code pour la fonction client est prêt, il reste seulement à écrire comment nos méthodes GET et POST fonctionneront lors de l'appel. Écrivons le code pour elles après la fonction client. La méthode client.get acceptera comme paramètre le chemin et appellera la fonction client, en lui passant ce chemin et le type de requête GET :

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

Et client.post doit transmettre à client le chemin, le type de requête POST et le corps de la requête :

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

C'est tout, notre petit client est prêt à travailler avec le serveur.

Ouvrez votre application avec les étudiants, créez-y dans le dossier api le fichier client.js. Après avoir consulté les matériaux de la leçon, écrivez (copiez) le code de la fonction client et de ses deux méthodes client.get et client.post.