Cliente para Aplicação em Redux

Nas lições anteriores, praticamente concluímos a parte do servidor para nossa aplicação, vamos complementá-la um pouco conforme necessário nas próximas lições. Agora precisamos criar um cliente para a aplicação, que enviará solicitações HTTP para o servidor.

Vamos abrir nossa aplicação de produtos e na pasta api criar o arquivo client.js. Para começar, vamos escrever a própria função client, que funcionará tanto para solicitações GET quanto POST. Ela receberá como parâmetros o caminho, o tipo e o corpo da solicitação (no caso de POST), se houver:

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

Em seguida, precisamos formar o objeto options, no qual passaremos várias informações para a solicitação. Isso será o tipo de solicitação e os cabeçalhos:

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

A propriedade body é opcional para nós, devemos passá-la se for uma solicitação POST. Para isso, dentro de client, após o código para o objeto options, vamos adicioná-lo ao options com o corpo da solicitação no formato JSON, se o método POST for selecionado:

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

Em seguida, abaixo no código de client, vamos organizar um bloco try, na primeira linha do qual, usando fetch, obteremos a resposta do servidor. Em caso de falha, tradicionalmente retornaremos uma promessa com um erro:

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

Agora vamos completar o código no bloco try. Após obter a response, precisamos processá-la. Vamos extrair os dados em JSON e se o status da resposta nos sinalizar que está tudo bem, então retornaremos um objeto com os dados e informações: status, cabeçalhos e endereço. Se o status não for 'ok', então lançaremos uma exceção com o texto do status:

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

O código para a função client está pronto, resta apenas escrever como nossos métodos GET e POST funcionarão quando chamados. Vamos escrever o código para eles após a função client. O método client.get receberá como parâmetro o caminho e chamará a função client, passando para ela esse caminho e o tipo de solicitação GET:

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

E o client.post deve passar para client o caminho, o tipo de solicitação POST e o corpo da solicitação:

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

Isso é tudo, nosso pequeno cliente está pronto para trabalhar com o servidor.

Abra sua aplicação de estudantes, crie nela, na pasta api, o arquivo client.js. Após revisar os materiais da lição, escreva (copie) o código da função client e de seus dois métodos client.get e client.post.