Xmlhttprequest - Depreciated Async False

Question

Xmlhttprequest - Depreciated Async False

Asked 5 years ago

Viewed 239 times

0

My console is informing me of this:

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

However, I need async false and I’m not sure how to do it.

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>

1

It is because AJAX should be used asynchronously, and in the future browsers can remove it. See this topic: https://answall.com/q/6392/8063... Note: "deprecated" is not "depreciated", it is "discontinued";) It is a false cognate.

– Sam

2019/11/26 at 15:58
True brother makes sense. I’ll see how I do here, if I leave as 'true' it solves the warning problem , but does not pass the variable 'horaServerX' out of function. Trying to give a study , kkk has some things that do not get into the worm’s head here kkkk

– Aquiles Maior

2019/11/27 at 13:39

1 answer

Browser other questions tagged javascript jquery ajax

You are not signed in. Login or sign up in order to post.

by Julio Henrique • **4,352** points · Answer 1 · 2019-11-26T18:18:23+00:00

Well, for you to make a non-synchron request is easy with the axios, take the example:

create a folder and within it a file named 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>

inside that folder put a file called axios.js and the contents of this you can copy and paste this link

The Axios is like ajax but it has a super powers more let’s say so, its documentation this link: Xios. in most projects frontend what work I see the use of Xios instead of the ajax.

Open the file in your browser and see the result in the log.

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

everything within then is run as synchronous ie, after the request your lines will be executed one after the other.

what is after the function:

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

runs asyncronously or runs independently of the above code. (as if it skips the code)