0

Estou consummindo uma api que me retorna um array de produtos com o axios, mas ela retorna uma promise, e não consigo usa-la no meu componente, pois na hora que o componente renderiza, a promise ainda não está resolvida!

function pegaDados() {
  return new Promise((resolve, reject) => {
    resolve( axios.get('https://cd8wxyy7ba.execute-api.sa-east-1.amazonaws.com/dev/products'))
  })
  
}

const dados = pegaDados().then( data => { return data.data})
console.log(dados)

Qaundo tento fazer um dados.map(...) pra percorrer esse array, não posso pois .map não é uma função de dados

2
  • É porque geralmente não se é possível retornar dados de dentro de um then, o que você pode fazer é colocar esse trecho dentro de uma função async e retornar com com await: tipo:function teste async () { const dados = await pegaDados(); Commented 27/06/2021 às 21:39
  • É porque geralmente não se é possível retornar dados de dentro de um then afirmação errada!
    – novic
    Commented 27/06/2021 às 23:05

1 Resposta 1

1

O seu código tem um Promise que tem outro Promise dentro de um função resolve do primeiro Promise, e nada disso é necessário, porque, o axios já retorna um Promise e pode ser resolvido facilmente:

async function pegaDados() {
    try {
        return await axios
            .get('https://cd8wxyy7ba.execute-api.sa-east-1.amazonaws.com/dev/products');
    } catch (e) {
        console.log(e);
    }    
}

é um das formas de solução com async/await onde essa função retorna as informações dessa API ou então um erro onde pode ser verificado.

Exemplo funcional com utilizando then, porque aqui no site não funciona infelizmente async/await, mas, nada impede utilizar, exemplo:

function App() {
  const [data, setData] = React.useState([]);
  const loadData = () => {
    axios.get('https://cd8wxyy7ba.execute-api.sa-east-1.amazonaws.com/dev/products')
    .then(result => setData(result.data));
  }
  React.useEffect(() => {
    loadData();
  }, []);
  if (data.length === 0) {
    return <div>Carregando ...</div>;
  }
  return (
    <React.Fragment>
    {data.map(item => (
      <div>
        {item.productSku} - {item.productDescription}
      </div>
    ))}
    </React.Fragment>
  )
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="root"></div>

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 .