Promise {status: "pending"}

Question

buscarUsuario.onclick = function() {
            var usuario = document.getElementById("usuario").value;
            var resultado = buscaUsuario(usuario);
            console.log(resultado);
          }

const buscaUsuario = async(usuario) => {
          var http = new XMLHttpRequest();
          let url = 'http://192.168.1.144/status?usuario=' + usuario;
              http.onreadystatechange = () => {
                  if (http.readyState == 4 && http.status == 200) {
                      var data = http.responseText;
                  }else {
                    var data = "Error ao buscar, tente novamente";
                  }
                  return data;
              }
              await http.open("GET", url, true);
              await http.send();
        }

How do I get the console.log to return the result of the search functionUsuario, which would be the answer of the page that sends the argument? the result of the log console is:

Promise {status: "pending"}

I saw that it has something to do with . then or . catch but I never used it and I didn’t understand how to implement in the code.

Answer 1

There are two errors in your code:

• You are not "waiting" for the result of Promise;
• You are returning the result in the function onreadystatechange, and the return should be in the function buscaUsuario

One way to solve this is to use the class Promise. Below is an example.

const buscarUsuario = document.querySelector('button')

/**
 * Nesta função, é obrigatório utilizar o operador `async`
 * Ele servirá para que possamos utilizar um outro operador
 * o `await`, que serve para indicar ao JS que queremos esperar
 * o resultado de uma função antes de ele prosseguir no código.
 *
 * Caso não façamos isso, o `console.log` será chamado antes
 * do resultado, já que a função `buscaUsuário` é assincrona
 */
buscarUsuario.onclick = async function() {
  var usuario = document.getElementById("usuario").value;
  var resultado = await buscaUsuario(usuario);
  console.log(resultado);
}

const buscaUsuario = async(usuario) => {
  /**
   * Retorna uma Promise
   * @params {Function} resolve Essa função será chamada quando ocorrer um sucesso na chamada da API
   * @params {Function} reject Essa função será chamada quando ocorrer uma falha na requisição
   */
  return new Promise((resolve, reject) => {
    var http = new XMLHttpRequest();
    let url = `https://dog.ceo/api/breeds/image/random?usuario=${usuario}`;
    http.onreadystatechange = () => {
      if (http.readyState == 4 && http.status == 200) {
        resolve(http.responseText)
      } else if (http.readyState == 4 && http.status >= 400) {
        reject('Falha')
      }
    }
    http.open("GET", url, true);
    http.send();
  })
}

<input type="text" id="usuario" />
<button>Dogs</button>

Answer 2

There are two ways, either you implement Promise or you modify your Function to use async/await.

Example A:

buscarUsuario.onclick = async function() {
    var usuario = document.getElementById("usuario").value;
    var resultado = await buscaUsuario(usuario);
    console.log(resultado);
}

const buscaUsuario = function(usuario) {
   return new Promise ((res, rej) => {
    var http = new XMLHttpRequest();
    let url = 'http://192.168.1.144/status?usuario=' + usuario;
        http.onreadystatechange = () => {
            if (http.readyState == 4 && http.status == 200) {
                var data = http.responseText;
            }else {
            var data = "Error ao buscar, tente novamente";
            }
            res(data);
        }
        http.open("GET", url, true);
        http.send();
  });
}

Example B:

buscarUsuario.onclick = function() {
    var usuario = document.getElementById("usuario").value;
    buscaUsuario(usuario).then(resultado => {
        console.log(resultado);
    });
}

const buscaUsuario = function(usuario) {
 return new Promise((res,rej)=> {
    var http = new XMLHttpRequest();
    let url = 'http://192.168.1.144/status?usuario=' + usuario;
        http.onreadystatechange = () => {
            if (http.readyState == 4 && http.status == 200) {
                var data = http.responseText;
            }else {
            var data = "Error ao buscar, tente novamente";
            }
            res(data);
        }
        http.open("GET", url, true);
        http.send();
   });
}