{"id":4503,"date":"2024-09-16T05:54:55","date_gmt":"2024-09-16T05:54:55","guid":{"rendered":"https:\/\/ubiq.co\/tech-blog\/?p=4503"},"modified":"2024-09-19T04:56:40","modified_gmt":"2024-09-19T04:56:40","slug":"how-to-return-response-from-asynchronous-call","status":"publish","type":"post","link":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/","title":{"rendered":"How to Return Response from Asynchronous Call"},"content":{"rendered":"\n<p>Today&#8217;s websites have become very complex and need to do many things at once. Since JavaScript is a single-threaded programming language, web developers need to use Asynchronous function calls and requests for this purpose. These function calls allow you to perform other tasks in parallel without having to wait for the result of function call. However, they often face difficulties about how to return response from asynchronous call. In this article, we will learn the different ways to receive response from asynchronous function calls in JavaScript.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#The_Problem\" >The Problem<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#Available_Solutions\" >Available Solutions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#How_to_Return_Response_from_Asynchronous_Call\" >How to Return Response from Asynchronous Call<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#1_Using_Callbacks\" >1. Using Callbacks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#2_Using_Promise\" >2. Using Promise<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#3_Using_AsyncAwait\" >3. Using Async\/Await<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Problem\"><\/span>The Problem<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let us take the example where we have 2 JavaScript functions a() and b(). Function a() waits for sometime before returning &#8216;hello&#8217; and b() immediately prints &#8216;hello world&#8217; in console. We save the value returned by a() in data variable and then call b().<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function a(){<br>   var result;<br>   i=0;<br>  \/\/takes some time<br>  while(i&lt;10000000){<br>    i++;<br>  }<br>  result = 'hello';<br>  return result<br>}<br><br>function b(){<br>  console.log('hello world');<br>}<br><br>var data = a();<br>console.log(data);<br>b();<\/pre>\n\n\n\n<p>Here is the output.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">hello<br>hello world<\/pre>\n\n\n\n<p>When we execute the above code, data variable has to wait for sometime before it receives the output from a(). On the other hand, b() has to wait even further to be executed. If a() takes too much time, then all subsequent code will have to wait for a() to complete. This is because JavaScript is a single threaded programming language the executes commands sequentially.<\/p>\n\n\n\n<p>To overcome this problem, let us say you decide to make a() asynchronous as shown below and then call b(). We have used setTimeout() function to wait for 5 seconds before setting result variable to &#8216;hello&#8217;. setTimeout() is an asynchronous function that returns control to the subsequent code without making it to wait for result.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function a(){<br>   var result;<br>   setTimeout(function(){result='hello'},5000);<br>   return result<br>}<br><br>function b(){<br>  console.log('hello world');<br>}<br><br>var data = a();<br><br>b();<br>console.log(data);<\/pre>\n\n\n\n<p>Here is the output.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">hello world<br>undefined<\/pre>\n\n\n\n<p>When we run the above code, you will see that b() function is executed immediately without waiting for the result of a(). But the data variable is undefined. This is because setTimeout() is an asynchronous function that immediately executes the next statement even before its time out value is over and callback function is executed. So a() returns result variable even before it is set to &#8216;hello&#8217; after 5 seconds. This is the problem commonly faced by web developers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Available_Solutions\"><\/span>Available Solutions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>At present, there are 3 solutions available for this problem:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Using Callbacks<\/strong> &#8211; Callbacks are functions that are passed as arguments to another function. They can be called from within that function as and when required. It allows you to control sequence of execution in JavaScript.<\/li>\n\n\n\n<li><strong>Using Promise<\/strong> &#8211; A promise is an object that contains the result of an asynchronous operation along with its state &#8211; rejected or resolved.<\/li>\n\n\n\n<li><strong>Using Async\/Await<\/strong> &#8211; Async makes a function return JavaScript promise while Await makes a function wait for the result of Promise.<\/li>\n<\/ol>\n\n\n\n<p>In this article, we will learn how to use each of these solutions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Return_Response_from_Asynchronous_Call\"><\/span>How to Return Response from Asynchronous Call<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let us look at the above approaches one by one.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Using_Callbacks\"><\/span>1. Using Callbacks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Callback is a function that is used as an argument for another function. In asynchronous programming, that allows an asynchronous function to call another function after it has completed processing, without making other code wait. This allows you to control execution sequence.<\/p>\n\n\n\n<p>Here is a simple example to illustrate it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function a(){<br>   console.log('hello world');<br>}<br><br>function b(data, callback){<br>  console.log(data);<br>  callback();<br>}<br><br>b('hello', a);<\/pre>\n\n\n\n<p>Here is the output.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">hello world<br>hello<\/pre>\n\n\n\n<p>The above example is meant for synchronous functions. Here is an example to use callbacks in asynchronous function such as SetTimeout. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function a(data){<br>   var result;<br>   setTimeout(function(){console.log(data);},5000);<br>}<br><br>function b(data, callback){<br>  console.log('hello world');<br>  callback(data);<br>}<br><br>b('hello', a);<\/pre>\n\n\n\n<p>Here is the output.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">hello world<br>hello<\/pre>\n\n\n\n<p>Here function a() is asynchronous as it uses SetTimeout(). While executing b(), we first display &#8216;hello world&#8217;. Only then we call callback() function, which displays a proper output instead of displaying &#8216;undefined&#8217;.<\/p>\n\n\n\n<p>Here is a real world use case of sending request to remote URL, which may take time, and continuing the processing without waiting for its result.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function get_data(callback) {<br>  let req = new XMLHttpRequest();<br>  req.open('GET', <strong>my_URL<\/strong>);<br>  req.onload = function() {<br>    if (req.status == 200) {<br>       callback(req.responseText);<br>    } else {<br>       callback(\"Error: \" + req.status);<br>    }<br>  }<br>  req.send();<br>}<br><br>function display_value(data){<br>  console.log(data);<br>}<br><br>get_data(display_value);<\/pre>\n\n\n\n<p>The main problem of callbacks is that it makes code complicated, especially in real-world situations where you have complex functions with multiple functions calls in each function. That is why Promise were introduced. Let us learn more about Promise below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Using_Promise\"><\/span>2. Using Promise<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\" rel=\"noreferrer noopener\">Promise<\/a> basically connects code that processes information and returns values, with code that uses these values.<\/p>\n\n\n\n<p>Here is a simple example of a Promise object that uses 2 callbacks resolve and reject &#8211; resolve is called when the result is a success and reject is called when it is an error. You don&#8217;t have to define these functions. They are simply placeholders to pass their argument to the code that uses this Promise object later.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">let my_promise = new Promise(function(resolve, reject) {<br> \/\/ some processing that takes time<br><br>  resolve(value_result); \/\/ when successful<br>  reject(error_result);  \/\/ when error<br>});<\/pre>\n\n\n\n<p>Here is the code that uses these values. The then() function uses two optional arguments &#8211; first one for success and the second one for failure.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">my_promise.then(<br>  function(value) { console.log(value) },<br>  function(error) { console.log(error) }<br>);<\/pre>\n\n\n\n<p>When you run the above code, the value_result passed in resolve() becomes available as value in my_promise.then(). Similarly, error_result becomes available as error in my_promise.then().<\/p>\n\n\n\n<p>Alternatively, you can also use then() and catch() functions to process value and error respectively as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">my_promise.then(<br>  function(value) { console.log(value) })<br>.catch(<br>  function(error) { console.log(error) });<\/pre>\n\n\n\n<p>Here is an example to use Promise to wait for a function result. It waits for setTimeout to complete before displaying its result.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">let my_promise = new Promise(function(resolve, reject) {<br>  setTimeout(function() { resolve(\"hello\"); }, 5000);<br>});<br><br>my_promise.then(function(value) {<br>  console.log(value);<br>});<br><br>console.log('hello world');<\/pre>\n\n\n\n<p>Here is the output.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">hello world<br>hello<\/pre>\n\n\n\n<p>In the above example, even though the promise handler is called before printing &#8216;hello world&#8217;, &#8216;hello&#8217; is printed only after it, indicating that it is asynchronous.<\/p>\n\n\n\n<p>Here is a real world example where we use Promise to wait for the result of a request, which generally takes some time.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">let my_promise = new Promise(function(resolve, reject) {<br>  let req = new XMLHttpRequest();<br>  req.open('GET', <strong>my_URL<\/strong>);<br>  req.onload = function() {<br>    if (req.status == 200) {<br>       resolve(req.response);<br>    } else {<br>       reject(\"Error occurred\");<br>    }<br>  };<br>  req.send();<br>});<br><br>my_promise.then(<br>  function(value) {display_data(value);})<br>.catch(<br>  function(error) {display_data(error);});<br><br>function display_data(data){<br>  console.log(data);<br>}<br><br>console.log('hello world');<\/pre>\n\n\n\n<p>Here is the output.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">hello world<br>response message from request<\/pre>\n\n\n\n<p>When we run the above code, it creates a Promise. In this promise, we create a request object that sends a request to my_url to fetch file\/data. Based on the response returned by this request, the Promise handler calls then() or error(). Please note, when the Promise object is created, it immediately returns the control to the subsequent code where we print &#8216;hello world&#8217;. Event though Promise handler is called before displaying this message, it is executed only after response is received.<\/p>\n\n\n\n<p>This allows you to write asynchronous code in a synchronous manner that is easy to understand. Also, it contains separate functions to clearly handle success and error states. Using Promise is one of the best ways to return response from asynchronous call in JavaScript functions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Using_AsyncAwait\"><\/span>3. Using Async\/Await<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Async and Await are two keywords used for implementing Asynchronous functions in JavaScript. Async keyword placed before a function definition will return a promise. Await keyword is placed in an Aync function to basically pause its execution and wait for a promise before proceeding further. Here is its syntax.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">async function hello() {<br>  return \"Hello\";<br>}<br><br>hello().then(<br>  function(value) {console.log(value);},<br>  function(error) {console.log(error);}<br>);<\/pre>\n\n\n\n<p>This is similar to the following code written using Promise.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function hello() {<br>  return Promise.resolve(\"Hello\");<br>}<br><br>hello().then(<br>  function(value) {console.log(value);},<br>  function(error) {console.log(error);}<br>);<\/pre>\n\n\n\n<p>Here is the syntax of Await keyword.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">let value = await promise;<\/pre>\n\n\n\n<p>Here is a simple example to demonstrate it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">async function hello() {<br>  let my_promise = new Promise(function(resolve, reject) {<br>       resolve(\"hello\");<br>  });<br>  console.log(await my_promise);<br>}<br><br>hello();<br>console.log('hello world');<\/pre>\n\n\n\n<p>Here is the output.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">hello world<br>hello<\/pre>\n\n\n\n<p>In the above example, we call hello() function before displaying &#8216;hello world&#8217; but it is displayed only afterwards. This is because the moment browser encounters async function call, it will immediately return control to the next statement, without waiting for its execution. So &#8216;hello world&#8217; is displayed. Thereafter, the asynchronous is executed and waited upon due to await keyword. That is why it is printed in the end.<\/p>\n\n\n\n<p>Here is a real world example where we make an asynchronous request for file\/data and continue our processing without waiting for the response. When the response it returned, it is processed appropriately.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">async function get_data() {<br>  let my_promise = new Promise(function(resolve) {<br>    let req = new XMLHttpRequest();<br>    req.open('GET', <strong>my_URL<\/strong>);<br>    req.onload = function() {<br>      if (req.status == 200) {<br>          resolve(req.response);<br>      } else {<br>          resolve(\"Error occurred\");<br>      }<br>    };<br>    req.send();<br>  });<br>  console.log(await my_promise);<br>}<br><br>get_data();<br>console.log('hello world');<\/pre>\n\n\n\n<p>Here is the output.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">hello world<br>response from request<\/pre>\n\n\n\n<p>In this example, we wrap the Asynchronous request in Promise using Async keyword and Promise constructor. Since requests can take some time, we use Await keyword to wait for the result of the promise. Otherwise, it would have printed undefined.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this article, we have learnt 3 different ways to return response from asynchronous function call. You can use any of them as per your requirement. Our recommendation is to use solution #3 with Async\/Await since it simplifies coding and is also the latest JavaScript standard supported by most modern web browsers and JS libraries.<\/p>\n\n\n\n<p><a href=\"https:\/\/ubiq.co\/\">Ubiq<\/a>\u00a0makes it easy to visualize data, and monitor them in real-time dashboards.\u00a0<a href=\"https:\/\/ubiq.co\/accounts\/register\">Try Ubiq<\/a>\u00a0for free.<\/p>\n\n\n\n<p>Also read:<\/p>\n\n\n\n<p><a href=\"https:\/\/ubiq.co\/tech-blog\/how-slicing-in-python-works\/\">How Slicing Works in Python<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-ask-user-input-in-python-until-valid-response\/\">How to Ask User Input in Python Until Valid Response<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-bind-events-to-dynamically-created-elements-in-javascript\/\">How to Bind Events to Dynamic JavaScript Elements<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Often web developers need to return response from asynchronous call. Here are the different ways to return Aynchronous JS response.<\/p>\n","protected":false},"author":1,"featured_media":4549,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[295],"tags":[306,305],"class_list":["post-4503","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-ajax","tag-asynchronous"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Return Response from Asynchronous Call - Ubiq BI<\/title>\n<meta name=\"description\" content=\"Often web developers need to return response from asynchronous call. Here are the different ways to return Aynchronous JS response.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Return Response from Asynchronous Call - Ubiq BI\" \/>\n<meta property=\"og:description\" content=\"Often web developers need to return response from asynchronous call. Here are the different ways to return Aynchronous JS response.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/\" \/>\n<meta property=\"og:site_name\" content=\"Ubiq BI\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ubiqbi\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-16T05:54:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-19T04:56:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/09\/return-response-from-asynchronous-call.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"389\" \/>\n\t<meta property=\"og:image:height\" content=\"291\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sreeram Sreenivasan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:site\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sreeram Sreenivasan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/\"},\"author\":{\"name\":\"Sreeram Sreenivasan\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"headline\":\"How to Return Response from Asynchronous Call\",\"datePublished\":\"2024-09-16T05:54:55+00:00\",\"dateModified\":\"2024-09-19T04:56:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/\"},\"wordCount\":1328,\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/return-response-from-asynchronous-call.jpg?fit=389%2C291&ssl=1\",\"keywords\":[\"ajax\",\"asynchronous\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/\",\"name\":\"How to Return Response from Asynchronous Call - Ubiq BI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/return-response-from-asynchronous-call.jpg?fit=389%2C291&ssl=1\",\"datePublished\":\"2024-09-16T05:54:55+00:00\",\"dateModified\":\"2024-09-19T04:56:40+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"description\":\"Often web developers need to return response from asynchronous call. Here are the different ways to return Aynchronous JS response.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/return-response-from-asynchronous-call.jpg?fit=389%2C291&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/return-response-from-asynchronous-call.jpg?fit=389%2C291&ssl=1\",\"width\":389,\"height\":291,\"caption\":\"return response from asynchronous call\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-return-response-from-asynchronous-call\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Return Response from Asynchronous Call\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\",\"name\":\"Ubiq BI\",\"description\":\"Build dashboards &amp; reports in minutes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\",\"name\":\"Sreeram Sreenivasan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"caption\":\"Sreeram Sreenivasan\"},\"description\":\"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sreeram-sreenivasan\\\/\"],\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/author\\\/wordpress\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Return Response from Asynchronous Call - Ubiq BI","description":"Often web developers need to return response from asynchronous call. Here are the different ways to return Aynchronous JS response.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/","og_locale":"en_US","og_type":"article","og_title":"How to Return Response from Asynchronous Call - Ubiq BI","og_description":"Often web developers need to return response from asynchronous call. Here are the different ways to return Aynchronous JS response.","og_url":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/","og_site_name":"Ubiq BI","article_publisher":"https:\/\/www.facebook.com\/ubiqbi","article_published_time":"2024-09-16T05:54:55+00:00","article_modified_time":"2024-09-19T04:56:40+00:00","og_image":[{"width":389,"height":291,"url":"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/09\/return-response-from-asynchronous-call.jpg","type":"image\/jpeg"}],"author":"Sreeram Sreenivasan","twitter_card":"summary_large_image","twitter_creator":"@UbiqBI","twitter_site":"@UbiqBI","twitter_misc":{"Written by":"Sreeram Sreenivasan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#article","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/"},"author":{"name":"Sreeram Sreenivasan","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"headline":"How to Return Response from Asynchronous Call","datePublished":"2024-09-16T05:54:55+00:00","dateModified":"2024-09-19T04:56:40+00:00","mainEntityOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/"},"wordCount":1328,"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/09\/return-response-from-asynchronous-call.jpg?fit=389%2C291&ssl=1","keywords":["ajax","asynchronous"],"articleSection":["JavaScript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/","url":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/","name":"How to Return Response from Asynchronous Call - Ubiq BI","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#primaryimage"},"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/09\/return-response-from-asynchronous-call.jpg?fit=389%2C291&ssl=1","datePublished":"2024-09-16T05:54:55+00:00","dateModified":"2024-09-19T04:56:40+00:00","author":{"@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"description":"Often web developers need to return response from asynchronous call. Here are the different ways to return Aynchronous JS response.","breadcrumb":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#primaryimage","url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/09\/return-response-from-asynchronous-call.jpg?fit=389%2C291&ssl=1","contentUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/09\/return-response-from-asynchronous-call.jpg?fit=389%2C291&ssl=1","width":389,"height":291,"caption":"return response from asynchronous call"},{"@type":"BreadcrumbList","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-return-response-from-asynchronous-call\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ubiq.co\/tech-blog\/"},{"@type":"ListItem","position":2,"name":"How to Return Response from Asynchronous Call"}]},{"@type":"WebSite","@id":"https:\/\/ubiq.co\/tech-blog\/#website","url":"https:\/\/ubiq.co\/tech-blog\/","name":"Ubiq BI","description":"Build dashboards &amp; reports in minutes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ubiq.co\/tech-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc","name":"Sreeram Sreenivasan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","caption":"Sreeram Sreenivasan"},"description":"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.","sameAs":["https:\/\/www.linkedin.com\/in\/sreeram-sreenivasan\/"],"url":"https:\/\/ubiq.co\/tech-blog\/author\/wordpress\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/09\/return-response-from-asynchronous-call.jpg?fit=389%2C291&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pbGGTT-1aD","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/4503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/comments?post=4503"}],"version-history":[{"count":55,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/4503\/revisions"}],"predecessor-version":[{"id":4567,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/4503\/revisions\/4567"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media\/4549"}],"wp:attachment":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media?parent=4503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/categories?post=4503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/tags?post=4503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}