Requisição Axios

[Julie_santiago 0]

Olá!

Pessoal, preciso muito de um help urgente. Estou tentando fazer uma simples query ao banco de dados, usando o Axios. Mas, não importa a forma de fazer a requisição, o Axios não funciona. O HTML está abaixo, onde chamo a função enviaDados() através do onsubmit.

<div class="input-group md-form">
    <form method="get" onsubmit="enviaDados()" name="buscar">
           <input type="text" id="Form-search2" class="form-control" name="nomeReagente">
            <label for="Form-search2">Search</label>
             <input type="submit" name="pesquisar" value="buscar">
    </form>

             <span class="input-group-text dark lighten-2" id="basic-text1">
                  <i class="fas fa-search text-dark" aria-hidden="true"></i>
             </span>
</div>

Meu arquivo main.js que contém a função enviaDados().

function enviaDados(){
    let nome = buscar.nomeReagente.value
    
    recebeDados(nome); 
}

Dentro dessa função, estou chamando outra: recebeDados() que executa a requisição Axios. Passo como parâmetro o valor lá do meu input. OBS.: Meu código está assim, aparentemente confuso, porque o objetivo é ter funções que enviam os dados dos meus formulários e outras funções (genéricas) para receber e tratar esses dados. Abaixo a função recebeDados():

function recebeDados(nome_reagente){
    axios.get('http://localhost/Quimica/php/recebe_json.php', {
        params: {
          nome 
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log('Não foi possível realizar a requsição: '+error);
      })
      .finally(function () {
        
      });  

}

Não importa o que eu faça, sempre cai no CATCH  - request aborted. Preciso muito resolver esse problema, mas não faço ideia do que pode ser. Relevem qualquer "noobice" porque estou aprendendo o básico ainda.

 

[ShadowDLL 2]

Suponho que seria assim:

 

CÓDIGO:

function recebeDados(nome_reagente){
      axios.get('http://localhost/Quimica/php/recebe_json.php', {
        params: {
          nome: nome_reagente
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log('Não foi possível realizar a requsição: '+error);
      });
}

 

[mrcode 0]

 

Oi, acho que seu código precisa de algumas melhoras.

 

O código do formulário é o mesmo

<div class="input-group md-form">
    <form method="get" onsubmit="enviaDados()" name="buscar">
           <input type="text" id="Form-search2" class="form-control" name="nomeReagente">
            <label for="Form-search2">Search</label>
             <input type="submit" name="pesquisar" value="buscar">
    </form>

             <span class="input-group-text dark lighten-2" id="basic-text1">
                  <i class="fas fa-search text-dark" aria-hidden="true"></i>
             </span>
</div>

async function enviaDados(){
  let nome = buscar.nomeReagente.value

  try{
    // a constante data vai retornar o valor da resposta do servidor.
    const { data } = await axios.get('http://localhost/Quimica/php/recebe_json.php',{ params: {nome} });
    console.log(`Meus dados: ${data}`);
  } catch(error) {
    console.log(`Erro: ${error}`);
  }

}

Eu fiz algumas alterações. Eu troquei os 

.then()

por await porque fica mais fácil de visualizar o código.

 

No caso, eu coloquei um try catch por fora do axios por que ele vai capturar qualquer erro que possa ter. No mais o código é o mesmo, só que agora usa await.

 

Ainda eu removi o valor nome_reagente que você estava passando na função, porque ele não estava sendo usado em nenhum lugar.