Boa tarde! Ainda não consegui entender como funciona a biblioteca axios, por favor, poderia me ajudar?
Com o fetch é feito assim:
const Api = {
ListaAutores: () => {
return fetch('http://localhost:8000/api/autor')
.then(res => Api.TrataErros(res))
},
CriaAutor: autor => {
return fetch('http://localhost:8000/api/autor', {method: 'POST', headers: {'content-type': 'application/json'}, body: autor})
.then(res => Api.TrataErros(res))
},
ListaNomes: nomes => {
return fetch('http://localhost:8000/api/autor/nome')
.then(res => Api.TrataErros(res))
},
ListaLivros: livros => {
return fetch('http://localhost:8000/api/autor/livro')
.then(res => Api.TrataErros(res))
},
RemoveAutor: id => {
return fetch(`http://localhost:8000/api/autor/${id}`, {method: 'DELETE', headers: {'content-type': 'application/json'},})
.then(res => Api.TrataErros(res))
},
TrataErros : res => {
if(!res.ok){
throw Error(res.responseText);
}
return res.json()
}
}
export default Api;
E por exemplo na tela autores:
import React from 'react';
import Api from '../../services/api';
import PopUp from '../../utils/PopUp';
import DataTable from '../../components/DataTable';
class Autores extends React.Component {
constructor(props){
super(props);
this.state = {
nomes: [],
titulo: 'Autores'
}
}
componentDidMount() {
Api.ListaNomes()
.then(res => {
if(res.message === 'success'){
PopUp.exibeMensagem("success", "Autores listados com sucesso")
this.setState({ nomes : [ ... this.state.nomes, ...res.data ] });
}
})
.catch(err => PopUp.exibeMensagem("error", "Falha na comunicação com a API ao listar os autores"))
}
render() {
return (
<>
<div className='container'>
<h1>Página de Autores</h1>
<DataTable dados={this.state.nomes} titulo={this.state.titulo} colunas={['nome']} />
</div>
</>
)
}
}
export default Autores;
Ele é passado aqui:
Api.ListaNomes()
.then(res => {
if(res.message === 'success'){}
Porém, fui tentar trocar o fetch para o axios da forma como está no documento do instrutor, mas da erro e não funciona:
import axios from "axios";
const Api = {
ListaAutores: () =>
{axios.get('http://localhost:8000/api/autor/')
.then(function(response){
console.log(response.data);
console.log(response.status);
})
.then(res => Api.TrataErros(res))
},
Como poderia mudar para que funcionasse com o axios?