jQuery ajax async: false causes a strange warning?

Question

In my JS App, i have many Ajax calls with async: false. I am using latest Chrome browser and in my console below warning appears recently.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

Now i am trying to change all async: false to async: true. But it causes a lot of error because my app needs to run with async: false.

Is the warning just a bug or something? Can i worry about that or ignore that?

Solution 1

Is the warning just a bug or something?

No, it's not a bug. Sync requests are indeed deprecated, for the reasons stated in the message.

Can i worry about that or ignore that?

You should heed the advice and make the appropriate changes to your app (and yes, it's not as simple as just changing async: false to async: true).

Maybe this helps to understand asynchronous operations better:

• Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
• How do I return the response from an asynchronous call?

Solution 2

JavaScript runs exclusively on the UI thread so a synchronous AJAX call will freeze the browser completely, until the server replies.

It's considered a bad pratice in UX Design for web applications and major browsers are deprecating this feature in favor of asynchronous requests with a callback.

You may not worry about the message now. It's not a bug but I strongly recommend you to start rewriting it because when a feature is marked as deprecated it means a warn that they can remove this feature anytime in the future.

It's also deprecated from jQuery 1.8+

As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success()

The recomended way:

var request = $.ajax({
  url: "script.php",
  data: { id : menuId },
  dataType: "application/json"
});

request.done(function(data) {
   // Executed in case of success
});

request.fail(function( jqXHR, textStatus ) {
  // Executed in case of error
});

Solution 3

This message is telling you that async: false creates a bad user experience. This is because it locks up the browser for the duration of the ajax call. This is not a bug, but an advisory message explaining that you're doing something you should probably not be doing.

I have rarely ever seen a legitimate need for async: false, but programming with async: true (to create a better user experience) requires writing code that works with async operations. It is something you have to learn how to do, but is very doable once learned.

You cannot just simply take code written to run synchronously and change the flag to be async and expect that synchronous code to work. Instead, you have to change your code to process an asynchronous response and you often have to restructure some code that uses the response to be in the asynchronous response handler.

If you want to understand how to start coding with asynchronous ajax, then I'd suggest you read this question and it's various answers: How do I return the response from an asynchronous call?

Solution 4

It is telling you that you run the risk of locking up the browser if the server is down.

Put up a modal dialog with a cancel button and call the function asynchronously.

Solution 5

Is the warning just a bug or something?

The warning itself isn't a bug. It's warning you that there may be bugs in your code. The functionality your code uses is deprecated, which means there is an increasingly small guarantee that it will work as you expect it to. The warning is simply, well, warning you about this.

Can i worry about that or ignore that?

Ignoring warnings is generally a bad idea. When they eventually become errors you'll have only yourself to blame for the downtime.

But it causes a lot of error because my app needs to run with async: false

You're mixing up the cause/effect relationship here. async: true isn't causing errors, the code is. Those errors should be corrected, not circumvented. Circumventing the errors by using async: false simply defers fixing them until later. This warning is telling you that "later" is approaching, and recommending that you fix the problems before they become worse.

If your app "needs to run with async: false" then your app is incorrectly designed. The warning is suggesting that you fix it. So is everybody else here.

View more solutions