Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida sobre Axios

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?

2 respostas
solução!

Boa tarde, Henrique! Como vai?

Que erro ocorre no seu código? Vc poderia mandar o log aqui? Assim poderei te ajudar de forma mais efetiva.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Olá Gabriel,

Segue o erro:

×
←→1 of 2 errors on the page
Unhandled Rejection (TypeError): Cannot read property 'ok' of undefined
TrataErros
C:/Users/DELL/Documents/Cursos/REACT-II/app-casa-do-codigo/src/services/api/index.js:36
  33 | },
  34 | 
  35 | TrataErros : res => {
> 36 |     if(!res.ok){
     | ^  37 |       throw Error(res.responseText);
  38 |     }
  39 |     return res.json()
View compiled
(anonymous function)
C:/Users/DELL/Documents/Cursos/REACT-II/app-casa-do-codigo/src/services/api/index.js:10
   7 |   .then(function(response){
   8 |     console.log(response.data);
   9 |     console.log(response.status); 
> 10 |   })
     | ^  11 |   .then(res => Api.TrataErros(res))
  12 | 
  13 | },