-1

Meu console está me informando isso:

jquery.js:9592 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because

Porém, preciso do async false e não estou sabendo a forma correta de fazê-lo.

function horax(){    
    $.ajax({
	type: 'GET',
    cache: false,
	'async': false,
    url: location.href,
    complete: function (req, textStatus) {
      var dateServer = req.getResponseHeader('Date');
      
	  var date = new Date(dateServer);
	  
	  horaServerX = moment(date).format('x');
	   
     $('#clock1').text(moment(date).format('HH:mm:ss'));

    }
  });
setTimeout(horax, 1000); 
}
horax();

alert(+horaServerX); // coloquei esse alert só pra testar
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script> <!-- -->


<b>Server Time: </b><span id="clock1"></span><br>

2
  • 1
    É porque o AJAX deve ser usado de forma assíncrona, e futuramente os navegadores podem remover isso. Veja este tópico: pt.stackoverflow.com/q/6392/8063... Obs.: "deprecated" não é "depreciado", é "descontinuado" ;) É um falso cognato.
    – Sam
    Commented 26/11/2019 às 15:58
  • Verdade irmão faz sentido. Vou ver como que faço aqui, se eu deixo como 'true' ele resolve o problema do alerta , porém não passa a variável 'horaServerX' pra fora da função. Tentando dar uma estudada , kkk tem umas coisas que não entram na cabeça de minhoca aqui kkkk Commented 27/11/2019 às 13:39

1 Resposta 1

-1

Bom, para você fazer uma requisição não assincrona é fácil com o axios, veja o exemplo:

crie um uma pasta e dentro dela um arquivo com o nome de inicio.html:

<!doctype html>
<html>
  <head>
    <title>AMD</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
  </head>
  <body class="container">
    <h1>AMD</h1>

    <div>
      <h3>User</h3>
      <div class="row">
        <img id="useravatar" src="" class="col-md-1"/>
        <div class="col-md-3">
          <strong id="username"></strong>
        </div>
      </div>

      <button type="button" id="load" onclick="loading()">load</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.min.js"></script>
    <script>
      requirejs.config({
        paths: {
          axios: 'axios'
        }
      });


      const loading = async () => {

        requirejs(['axios'], (axios) => {
          axios.get('https://api.github.com/users/mzabriskie')
            .then(function (user) {
              //document.getElementById('useravatar').src = user.data.avatar_url;
              document.getElementById('username').innerHTML = user.data.name;
              console.log("sera executado depois que terminar a request");
            });
        });

        console.log("sera executado antes de terminar a request");

      }
    </script>
  </body>
</html>

dentro dessa pasta coloque um arquivo chamado axios.js e o conteudo desse aquivo você pode copiar e colar deste link

O axios é como o ajax mas ele tem uns super poderes a mais vamos se dizer assim, sua documentação esta neste link: axios. na maioria dos projetos frontend que trabalho vejo o uso de axios ao inves do ajax.

Abra o arquivo no seu navegador e veja o resultado no log.

.then(function (user) {                  
     console.log("sera executado depois que terminar a request");
});

tudo dentro de then é rodado como sincrono ou seja, apos a requisição suas linhas serão executadas uma apos a outra.

já o que esta depois da função:

console.log("sera executado antes de terminar a request");

é executado de forma asyncrona ou seja é executado independente do codigo acima. (como se ele pulasse o código)

1
  • 1
    poxa irmão, obrigado pelas dicas, vou tentar aplica-las agora. Logo dou um feedback aqui se consegui algo. Obrigado!!!! Commented 27/11/2019 às 13:40

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 .