3

Tenho uma API (POST) na qual eu passo alguns parâmetro e ela me retorna resultados e a questão é a seguinte:

Tenho um tipo dashboard onde tenho q pegar dados do DIA e dados do MES (usando a mesma API, porem passando parâmetros diferentes.

Pra pegar os dados do dia eu uso:

import React, {Component} from 'react'
import '../../index.css';

export default class FaturamentoDia extends Component{

    constructor(props) {
      super(props);
      this.state = {
        itensDia: [],
        wTotGeral: '',
      };
    }


    componentDidMount() {

      const data = {
        "aEmp" : ["004"],
        "PeriodoDe" : "2019-1-15T12:54:21Z",
        "PeriodoAte" : "2019-1-15T12:54:21Z"
      }
      const requestInfoDia = {
          method: 'POST',
          body: JSON.stringify(data),
          headers: new Headers({
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          }),
      };

        const dadosDia = fetch('http://10.0.0.49:9000/rzcFatPeriodo', requestInfoDia); 
        dadosDia.then(response => { 
          console.log(response);
          return response.json(); 

        }).then(itensDia => {

        var swTotGeral = 0;         

        for (var i=0;i<itensDia.length;i++){
          if(itensDia[i].DEFFATURAMENTO === 'D'){
            var wValAux = -1;
          }else{
            wValAux = 1;
          }
          if(itensDia[i].ESTADONF !== 'C' && itensDia[i].ESTADONF !== 'I' && itensDia[i].ESTADONF !== 'D' ){
            swTotGeral = swTotGeral + (itensDia[i].VALCONTABIL* wValAux);

          }


        }


        var wTotGeral = swTotGeral.toLocaleString('pt-br',{style: 'currency', currency: 'BRL'});

        console.log("Dia: "+wTotGeral)       

          this.setState({ itensDia, wTotGeral })

        });
   } 
   render() {
     const {wTotGeral} = this.state

     return (

      <div>
        {wTotGeral}
      </div> 

    );  
   }

}

O resultado final aparece corretamente em wTotGeral;

em outro arquivo eu faço a consulta do mes .... mudando apenas

const data = {
"aEmp" : ["004"],
"PeriodoDe" : "2019-1-01T12:54:21Z",
"PeriodoAte" : "2019-1-31T12:54:21Z"

}

ou seja pegando dados do mês todo, o problema que quando eu vou mostrar os dados na tela, uma requisição retorna 200 (ok) e mostra os dados e a outra retorna 500.

inserir a descrição da imagem aqui

Alguém poderia me da uma ajuda em como fazer os dados aparecerem ao mesmo tempo e tentei await antes do fetch, mas não deu certo.

1 Resposta 1

4

Você não pode ter a garantia de que ambas as requisições vão ser resolvidas ao mesmo tempo estando elas em componentes diferentes - salvo o caso de elas serem executadas em paralelo através de um saga, por exemplo.

Porém consegue garantir que ambas as seções vão plotar os dados no mesmo instante revendo a arquitetura da sua aplicação e levando ambas as requisições para um componente de ordem maior que seria responsável por distribuir os dados após obter respostas. A plotagem dos dados pode ser bloqueada através de um estado de carregamento, que garanta com que os dados só serão exibidos após a resolução das requisições.

Já que as suas requisições são idênticas, tendo apenas o payload alterado, você poderia implementar um serviço que se responsabilize por receber os dados da requisição e realizá-la, algo nesse sentido:

async function getBilling(requestData) {
  const requestOptions = {
    method: 'POST',
    body: JSON.stringify(requestData),
    headers: new Headers({
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }),
  };

  const response = await fetch('http://10.0.0.49:9000/rzcFatPeriodo', requestOptions);

  return response?.json();
}

Isso iria reduzir o código repetido e facilitar a manutenção. No seu componente de ordem maior (que seria responsável por renderizar as seções que você precisa que tenham dados exibidos ao mesmo tempo), ficaria algo como:

componentDidMount() {
  ...

  this.setState(prevState => ({ ...prevState, isLoading: true }));

  const billingOfDayRequestData = {
    aEmp: ['004'],
    PeriodoDe: '2019-1-15T12:54:21Z',
    PeriodoAte: '2019-1-15T12:54:21Z',
  }

  const billingOfDay = await getBilling(billingOfDayRequestData);

  const billingOfMonthRequestData = {
    aEmp: ['004'],
    PeriodoDe: '2019-1-01T12:54:21Z',
    PeriodoAte: '2019-1-31T12:54:21Z',
  }

  const billingOfMonth = await getBilling(billingOfDayRequestData);

  this.setState(prevState => ({ ...prevState, billingOfDay, billingOfMonth, isLoading: false  }));

  ...
}

Caso o uso do prevState gere dúvidas, você pode obter uma boa resposta em: https://stackoverflow.com/a/54807520/11009883

Espero ter ajudado.

2
  • com certeza ajudou bastante... vou tentar trabalhar em cima dessa sua dica.... porém me ficou uma duvida ... nessa forma como eu buscaria os dados da minha API ? (sou iniciante nessa área) Commented 2/06/2020 às 11:54
  • @AlexandrePrezzi O serviço está assumindo a responsabilidade de realizar a requisição, desde que receba os dados, servindo como uma abstração para que possa ser usado por um ou mais componentes, como acontece em const billingOfDay = await getBilling(billingOfDayRequestData);.Serviços são geralmente definidos em um diretório a parte no projeto, frequentemente em /src/services.
    – ljsb
    Commented 2/06/2020 às 12:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .