Cliente para la aplicación en Redux

En las lecciones anteriores prácticamente completamos la parte del servidor para nuestra aplicación, la complementaremos un poco según sea necesario en las siguientes lecciones. Ahora necesitamos crear un cliente para la aplicación, que enviará solicitudes HTTP al servidor.

Abramos nuestra aplicación con productos y en la carpeta api creemos el archivo client.js. Para empezar, escribiremos la función client, que funcionará tanto para solicitudes GET como POST. Recibirá como parámetros la ruta, el tipo y el cuerpo de la solicitud (en caso de POST), si lo hay:

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

A continuación, necesitamos formar el objeto options, en el que pasaremos diversa información para la solicitud. Este será el tipo de solicitud y los encabezados:

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

La propiedad body es opcional para nosotros, debemos pasarla si tenemos una solicitud POST. Para ello, dentro de client, después del código para el objeto options, lo añadiremos a options con el cuerpo de la solicitud en formato JSON, si se selecciona el método POST:

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

Luego, más abajo en el código de client, organizaremos un bloque try, en cuya primera línea usaremos fetch para obtener la respuesta del servidor. En caso de fallo, tradicionalmente devolveremos una promesa con un error:

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

Ahora completemos el código en el bloque try. Después de obtener response, necesitamos procesarlo. Extraeremos los datos en JSON y si el estado de la respuesta nos indica que todo está bien, entonces devolveremos un objeto con los datos e información: estado, encabezados y dirección. Si el estado no es 'ok', entonces lanzaremos una excepción con el texto del estado:

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

El código para la función client está listo, solo queda escribir cómo funcionarán nuestros métodos GET y POST cuando se llamen. Escribamos el código para ellos después de la función client. El método client.get recibirá como parámetro la ruta y llamará a la función client, pasándole esta ruta y el tipo de solicitud GET:

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

Y client.post debe pasar para client la ruta, el tipo de solicitud POST y el cuerpo de la solicitud:

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

Eso es todo, nuestro pequeño cliente está listo para trabajar con el servidor.

Abra su aplicación con estudiantes, creé en ella en la carpeta api el archivo client.js. Después de revisar los materiales de la lección, escriba (copie) el código de la función client y sus dos métodos client.get y client.post.