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 react 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>
function teste async () { const dados = await pegaDados();
É porque geralmente não se é possível retornar dados de dentro de um then
afirmação errada!