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:

api/client.jsexport 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:

api/client.jsexport 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:

api/client.jsif (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:

api/client.jslet 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:

api/client.jstry {
  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:

api/client.jsclient.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:

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

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