0

Estou usando o react e quando tento salvar no banco de dados me retorna esse erro:

Cannot read property 'protocol' of undefined

Meu codigo é esse:

const baseUrl = "http://localhost:8000/api/employee";

import axios from 'axios';

const employee = {};

employee.list = async () => {
    const urlList = baseUrl + "/role";
    const res = await axios.get(urlList)
        .then(response => {
            return response.data;
        })
        .catch(error => {
            return error;
        })
    return res;
}
employee.save = async (data) => {
    const urlSave = baseUrl + "/create";
    const res = await axios.post(urlSave.data)
        .then(response => {
            return response.data;
        })
        .catch(error => {
            return error;
        })
    return res;
}

export default employee;

uma ultima informação meu vs code acusa que o data do employee.save não está sendo usado em lugar nenhum já tentei usar o this e mudar o caminho no .env e nada funciona alguém pode ajudar?

6
  • está uma mistura com os seus promise ou usa async e await ou o método then, ou seja, o código está escrito totalmente errado e por isso de erros estranhos.
    – novic
    21/01/2021 às 13:04
  • 2
    Quando você envia o post, você tem que enviar os dados. Por exemplo: Vocês está fazendo assim await axios.post(urlSave.data), acho que você quis fazer assim: await axios.post(urlSave, data). E outra, se você for usar o await não então não se usa o then nem catch 21/01/2021 às 13:14
  • verdade outro problema que passou desapercebido @adventistaam, além dos promise, não foi passado o valor no post!
    – novic
    21/01/2021 às 13:16
  • E até onde eu sei, primeiro se configura o axios. const http = axios.create( ({baseURL: urlbase }). E daí se usa os verbos: http.get(), http.post(), etc 21/01/2021 às 13:20
  • 1
    Ah, ta! Blz..... 21/01/2021 às 13:30

2 Respostas 2

1

Creio que você você está usando um ponto (.) no lugar da vírgula (,) para enviar os dados

Outra coisa interessante é que você está usando async e then catch na sua função

employee.save = async (data) => {
    const urlSave = baseUrl + "/create";
    const res = await axios.post(urlSave.data)
        .then(response => {
            return response.data;
        })
        .catch(error => {
            return error;
        })
    return res;
}

No trecho axios.post(urlSave.data), tente substituir por axios.post(urlSave, data)

E na parte dos retornos por você pode tanto assim:

 const res = await axios.post(urlSave.data)
 return res;

Ficando no final sua função assim:

employee.save = async (data) => {
    const urlSave = baseUrl + "/create";
    const res = await axios.post(urlSave, data)
    return res;
}

Ou assim:

const res = axios.post(urlSave.data)
                 .then(response => {
                      response.data 
                  }).catch(error => {
                       console.log(error)
                  })

Aí nesse último para você obter os valorse você terá que usar uma promise

Ficando assim:

employee.save = (data) => {
     return new Promise((resolve, reject)=>{
         const urlSave = baseUrl + "/create";
         axios.post(urlSave, data)
              .then(response => {
                 resolve( response.data );
               })
               .catch(error => {
                   reject(error)
               })
          })  

Aí para obter o valor nessa função teria que ser usando usando async ou then

Espero que ajude

1

Amigo, tente fazer dessa forma utilizando apenas o async/await. O que você fez foi utilizar as pormisses junto com async/await, o que é errado. Além de não ter iniciado a instancia do axios.

const baseUrl = "http://localhost:8000/api/employee";
    
import axios from 'axios';

const api = axios.create({
  baseUrl: baseUrl
});
    
const employee = {};
    
employee.list = async () => {
  try {
    const { data } = await api.get('/role')

    return data;
  } catch(err) {
    return err;
  }
};

employee.save = async (data) => {
  try {
    const { data: respData } = await api.post('/create', data)

    return respData;
  } catch(err) {
    return err;
  }
}

export default employee;
2
  • uma ressalva não precisa e não é regra que precise utilizar create no axios, você pode ou não utilizar, facilita sim se for utilizado em vários lugares com a mesmo endereço, mas não é obrigatório.
    – novic
    21/01/2021 às 14:23
  • Sim, concordo com você @novic, não é obrigatório, mais facilita o entendimento e seria ate melhor se estive em um arquivo separado. 21/01/2021 às 14:46

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 .