[ad_1]
\n<\/p>\n
\n\u2192 For a more general explanation of asynchronous behaviour with different examples, see<\/em> Why is my variable unaltered after I modify it inside of a function? – Asynchronous code reference<\/p>\n
\u2192 If you already understand the problem, skip to the possible solutions below.<\/em><\/p>\n<\/blockquote>\n
The problem<\/h1>\n
The A<\/strong> in Ajax<\/a> stands for asynchronous<\/strong><\/a>. That means sending the request (or rather receiving the response) is taken out of the normal execution flow. In your example,
$.ajax<\/code> returns immediately and the next statement,return result;<\/code>, is executed before the function you passed assuccess<\/code> callback was even called.<\/p>\nHere is an analogy which hopefully makes the difference between synchronous and asynchronous flow clearer:<\/p>\n
Synchronous<\/h2>\n
Imagine you make a phone call to a friend and ask him to look something up for you. Although it might take a while, you wait on the phone and stare into space, until your friend gives you the answer that you needed.<\/p>\n
The same is happening when you make a function call containing “normal” code:<\/p>\n
function findItem() {\n var item;\n while(item_not_found) {\n \/\/ search\n }\n return item;\n}\n\nvar item = findItem();\n\n\/\/ Do something with item\ndoSomethingElse();\n<\/code><\/pre>\nEven though
findItem<\/code> might take a long time to execute, any code coming aftervar item = findItem();<\/code> has to wait<\/em> until the function returns the result.<\/p>\nAsynchronous<\/h2>\n
You call your friend again for the same reason. But this time you tell him that you are in a hurry and he should call you back<\/em> on your mobile phone. You hang up, leave the house, and do whatever you planned to do. Once your friend calls you back, you are dealing with the information he gave to you.<\/p>\n
That’s exactly what’s happening when you do an Ajax request.<\/p>\n
findItem(function(item) {\n \/\/ Do something with the item\n});\ndoSomethingElse();\n<\/code><\/pre>\nInstead of waiting for the response, the execution continues immediately and the statement after the Ajax call is executed. To get the response eventually, you provide a function to be called once the response was received, a callback<\/em> (notice something? call back<\/em> ?). Any statement coming after that call is executed before the callback is called.<\/p>\n
\nSolution(s)<\/h1>\n
Embrace the asynchronous nature of JavaScript!<\/strong> While certain asynchronous operations provide synchronous counterparts (so does “Ajax”), it’s generally discouraged to use them, especially in a browser context.<\/p>\n
Why is it bad do you ask?<\/p>\n
JavaScript runs in the UI thread of the browser and any long-running process will lock the UI, making it unresponsive. Additionally, there is an upper limit on the execution time for JavaScript and the browser will ask the user whether to continue the execution or not.<\/p>\n
All of this results in a really bad user experience. The user won’t be able to tell whether everything is working fine or not. Furthermore, the effect will be worse for users with a slow connection.<\/p>\n
In the following we will look at three different solutions that are all building on top of each other:<\/p>\n
\n
- Promises with
async\/await<\/code><\/strong> (ES2017+, available in older browsers if you use a transpiler or regenerator)<\/li>\n- Callbacks<\/strong> (popular in node)<\/li>\n
- Promises with
then()<\/code><\/strong> (ES2015+, available in older browsers if you use one of the many promise libraries)<\/li>\n<\/ul>\nAll three are available in current browsers, and node 7+.<\/strong><\/p>\n
\nES2017+: Promises with
async\/await<\/code><\/a><\/h2>\nThe ECMAScript version released in 2017 introduced syntax-level support<\/em> for asynchronous functions. With the help of
async<\/code> andawait<\/code>, you can write asynchronous in a “synchronous style”. The code is still asynchronous, but it’s easier to read\/understand.<\/p>\n
async\/await<\/code> builds on top of promises: anasync<\/code> function always returns a promise.await<\/code> “unwraps” a promise and either result in the value the promise was resolved with or throws an error if the promise was rejected.<\/p>\nImportant:<\/strong> You can only use
await<\/code> inside anasync<\/code> function or in a JavaScript module<\/a>. Top-levelawait<\/code> is not supported outside of modules, so you might have to make an async IIFE (Immediately Invoked Function Expression<\/a>) to start anasync<\/code> context if not using a module.<\/p>\nYou can read more about
async<\/code><\/a> andawait<\/code><\/a> on MDN.<\/p>\nHere is an example that elaborates the delay<\/em> function
findItem()<\/code> above:<\/p>\n\/\/ Using 'superagent' which will return a promise.\nvar superagent = require('superagent')\n\n\/\/ This is isn't declared as `async` because it already returns a promise\nfunction delay() {\n \/\/ `delay` returns a promise\n return new Promise(function(resolve, reject) {\n \/\/ Only `delay` is able to resolve or reject the promise\n setTimeout(function() {\n resolve(42); \/\/ After 3 seconds, resolve the promise with value 42\n }, 3000);\n });\n}\n\nasync function getAllBooks() {\n try {\n \/\/ GET a list of book IDs of the current user\n var bookIDs = await superagent.get('\/user\/books');\n \/\/ wait for 3 seconds (just for the sake of this example)\n await delay();\n \/\/ GET information about each book\n return superagent.get('\/books\/ids=\"+JSON.stringify(bookIDs));\n } catch(error) {\n \/\/ If any of the awaited promises was rejected, this catch block\n \/\/ would catch the rejection reason\n return null;\n }\n}\n\n\/\/ Start an IIFE to use `await` at the top level\n(async function(){\n let books = await getAllBooks();\n console.log(books);\n})();\n<\/code><\/pre>\nCurrent browser<\/a> and node<\/a> versions support
async\/await<\/code>. You can also support older environments by transforming your code to ES5 with the help of regenerator<\/a> (or tools that use regenerator, such as Babel<\/a>).<\/p>\n
\nLet functions accept callbacks<\/em><\/h2>\n
A callback is when function 1 is passed to function 2. Function 2 can call function 1 whenever it is ready. In the context of an asynchronous process, the callback will be called whenever the asynchronous process is done. Usually, the result is passed to the callback.<\/p>\n
In the example of the question, you can make
foo<\/code> accept a callback and use it assuccess<\/code> callback. So this<\/p>\nvar result = foo();\n\/\/ Code that depends on \"result'\n<\/code><\/pre>\nbecomes<\/p>\n
foo(function(result) {\n \/\/ Code that depends on 'result'\n});\n<\/code><\/pre>\nHere we defined the function “inline” but you can pass any function reference:<\/p>\n
function myCallback(result) {\n \/\/ Code that depends on 'result'\n}\n\nfoo(myCallback);\n<\/code><\/pre>\n
foo<\/code> itself is defined as follows:<\/p>\nfunction foo(callback) {\n $.ajax({\n \/\/ ...\n success: callback\n });\n}\n<\/code><\/pre>\n
callback<\/code> will refer to the function we pass tofoo<\/code> when we call it and we pass it on tosuccess<\/code>. I.e. once the Ajax request is successful,$.ajax<\/code> will callcallback<\/code> and pass the response to the callback (which can be referred to withresult<\/code>, since this is how we defined the callback).<\/p>\nYou can also process the response before passing it to the callback:<\/p>\n
function foo(callback) {\n $.ajax({\n \/\/ ...\n success: function(response) {\n \/\/ For example, filter the response\n callback(filtered_response);\n }\n });\n}\n<\/code><\/pre>\nIt’s easier to write code using callbacks than it may seem. After all, JavaScript in the browser is heavily event-driven (DOM events). Receiving the Ajax response is nothing else but an event.
\nDifficulties could arise when you have to work with third-party code, but most problems can be solved by just thinking through the application flow.<\/p>\n
\nES2015+: Promises with then()<\/a><\/h2>\n
The Promise API<\/a> is a new feature of ECMAScript 6 (ES2015), but it has good browser support<\/a> already. There are also many libraries which implement the standard Promises API and provide additional methods to ease the use and composition of asynchronous functions (e.g., bluebird<\/a>).<\/p>\n
Promises are containers for future<\/em> values. When the promise receives the value (it is resolved<\/em>) or when it is canceled (rejected<\/em>), it notifies all of its “listeners” who want to access this value.<\/p>\n
The advantage over plain callbacks is that they allow you to decouple your code and they are easier to compose.<\/p>\n
Here is an example of using a promise:<\/p>\n<\/p>\n
\n\nfunction delay() {\n \/\/ `delay` returns a promise\n return new Promise(function(resolve, reject) {\n \/\/ Only `delay` is able to resolve or reject the promise\n setTimeout(function() {\n resolve(42); \/\/ After 3 seconds, resolve the promise with value 42\n }, 3000);\n });\n}\n\ndelay()\n .then(function(v) { \/\/ `delay` returns a promise\n console.log(v); \/\/ Log the value once it is resolved\n })\n .catch(function(v) {\n \/\/ Or do something else if it is rejected\n \/\/ (it would not happen in this example, since `reject` is not called).\n });<\/code><\/pre>\n.as-console-wrapper { max-height: 100% !important; top: 0; }<\/code><\/pre>\n<\/div>\n<\/div>\nApplied to our Ajax call we could use promises like this:<\/p>\n<\/p>\n
\n\nfunction ajax(url) {\n return new Promise(function(resolve, reject) {\n var xhr = new XMLHttpRequest();\n xhr.onload = function() {\n resolve(this.responseText);\n };\n xhr.onerror = reject;\n xhr.open('GET', url);\n xhr.send();\n });\n}\n\najax(\"https:\/\/jsonplaceholder.typicode.com\/todos\/1\")\n .then(function(result) {\n console.log(result); \/\/ Code depending on result\n })\n .catch(function() {\n \/\/ An error occurred\n });<\/code><\/pre>\n.as-console-wrapper { max-height: 100% !important; top: 0; }<\/code><\/pre>\n<\/div>\n<\/div>\nDescribing all the advantages that promise offer is beyond the scope of this answer, but if you write new code, you should seriously consider them. They provide a great abstraction and separation of your code.<\/p>\n
More information about promises: HTML5 rocks – JavaScript Promises<\/a>.<\/p>\n
Side note: jQuery’s deferred objects<\/h3>\n
Deferred objects are jQuery’s custom implementation of promises (before the Promise API was standardized). They behave almost like promises but expose a slightly different API.<\/p>\n
Every Ajax method of jQuery already returns a “deferred object” (actually a promise of a deferred object) which you can just return from your function:<\/p>\n
function ajax() {\n return $.ajax(...);\n}\n\najax().done(function(result) {\n \/\/ Code depending on result\n}).fail(function() {\n \/\/ An error occurred\n});\n<\/code><\/pre>\nSide note: Promise gotchas<\/h3>\n
Keep in mind that promises and deferred objects are just containers<\/em> for a future value, they are not the value itself. For example, suppose you had the following:<\/p>\n
function checkPassword() {\n return $.ajax({\n url: '\/password',\n data: {\n username: $('#username').val(),\n password: $('#password').val()\n },\n type: 'POST',\n dataType: 'json'\n });\n}\n\nif (checkPassword()) {\n \/\/ Tell the user they're logged in\n}\n<\/code><\/pre>\nThis code misunderstands the above asynchronous issues. Specifically,
$.ajax()<\/code> doesn’t freeze the code while it checks the ‘\/password’ page on your server – it sends a request to the server and while it waits, it immediately returns a jQuery Ajax Deferred object, not the response from the server. That means theif<\/code> statement is going to always get this Deferred object, treat it astrue<\/code>, and proceed as though the user is logged in. Not good.<\/p>\nBut the fix is easy:<\/p>\n
checkPassword()\n.done(function(r) {\n if (r) {\n \/\/ Tell the user they're logged in\n } else {\n \/\/ Tell the user their password was bad\n }\n})\n.fail(function(x) {\n \/\/ Tell the user something bad happened\n});\n<\/code><\/pre>\n
\nNot recommended: Synchronous “Ajax” calls<\/h2>\n
As I mentioned, some(!) asynchronous operations have synchronous counterparts. I don’t advocate their use, but for completeness’ sake, here is how you would perform a synchronous call:<\/p>\n
Without jQuery<\/h3>\n
If you directly use a
XMLHttpRequest<\/code><\/a> object, passfalse<\/code> as third argument to.open<\/code><\/a>.<\/p>\njQuery<\/h3>\n
If you use jQuery<\/a>, you can set the
async<\/code> option tofalse<\/code>. Note that this option is deprecated<\/em> since jQuery 1.8.
\nYou can then either still use asuccess<\/code> callback or access theresponseText<\/code> property of the jqXHR object<\/a>:<\/p>\nfunction foo() {\n var jqXHR = $.ajax({\n \/\/...\n async: false\n });\n return jqXHR.responseText;\n}\n<\/code><\/pre>\nIf you use any other jQuery Ajax method, such as
$.get<\/code>,$.getJSON<\/code>, etc., you have to change it to$.ajax<\/code> (since you can only pass configuration parameters to$.ajax<\/code>).<\/p>\nHeads up!<\/strong> It is not possible to make a synchronous JSONP request. JSONP by its very nature is always asynchronous (one more reason to not even consider this option).<\/p>\n<\/p><\/div>\n