Consecutively making asynchronous calls can be messy. Is there a cleaner alternative?
The issue with the current approach is its lack of clarity:
ajaxOne(function() {
// do something
ajaxTwo(function() {
// do something
ajaxThree()
});
});
In this code snippet, the anonymous functions serve as callbacks triggered upon receiving a response from the server.
Since I'm relying on a third-party API for AJAX requests, I am in search of a more standardized solution.
Utilizing functional programming can be beneficial in solving this issue. For instance, with jsdeferred, you can structure your code like this:
next(ajaxOne).next(ajaxTwo).next(ajaxThree).error(function(e){alert('An error occurred:' + e)})
The "sequential" ajax functions - ajaxOne, ajaxTwo, and ajaxThree - are designed to receive the return value of their predecessor function as a parameter. If additional parameters need to be passed, they can be defined in a global object before initiating the chain of ajax calls.
If you find yourself with a single nested function, feel free to keep it as it is. However, when dealing with multiple nested calls, it's best practice to extract these callbacks into a separate method and invoke it from the nested function...
ajaxOne(function(result) { handleAjaxOneCallback(result, someExtraNeededArg); } );
function handleAjaxOneCallback(result, someExtraNeededParam) {
// perform actions
ajaxTwo(function(result) { handleAjaxTwoCallback(result, myFoo, myBar); });
}
function handleAjaxTwoCallback(result, foo, bar) {
// take appropriate steps
ajaxThree(/* ... */);
}
Although I am relatively new to JavaScript, I recently faced a similar issue when using the jQuery ajax function. The task was to upload multiple documents via POST to a server in a specific order. Nesting callbacks seemed like it would lead to messy code. After reading some answers, I devised a solution that worked well for me. I created a single function with a switch statement to handle different callback scenarios:
var callback = function(sCallIdentifier, callbackParameters){
switch(sCallIdentifier){
case "ajaxOne":
doYourStuff(callbackParameters); //do your stuff for ajaxOne
ajaxTwo(function(newCallbackParameters){
/*define a anonymous function as actual method-callback and pass the call-identifier, together with all parameters, to your defined callback function*/
callback("ajaxTwo", newCallbackParameters);
});
break;
case "ajaxTwo":
doYourStuff(callbackParameters);
ajaxThree(function(newCallbackParameters){
callback("ajaxThree", newCallbackParameters);
});
break;
case "ajaxThree":
doYourStuff();
break;
}
});
If there are better alternatives, please feel free to share. While I may not be a JavaScript expert, this approach has proven effective for me.
Best, René
Edit:
I later discovered that Promises offer a more efficient solution to this problem.
When you find yourself not needing the closure scope in your callbacks, it's best to put the callbacks into separate functions and invoke them by their respective names. Here's an example:
var requestOne = function() {
makeAjaxCall(responseOne);
}
var responseOne = function() {
//perform some actions...
makeAjaxCall(responseTwo);
}
var responseTwo = function() {
//carry out additional actions...
}
Before, I would use jQuery to load external website content such as html or json. Sometimes, I even utilized a proxy PHP page in order to bypass strict origin policies on certain sites. However, I've encountered an issue with some websites. In the HT ...
I have a Paper element with checkboxes in it. Here is the image of what I am talking about: https://i.stack.imgur.com/Epmk5.png Currently, the checkboxes are arranged horizontally, but I want them to be stacked vertically. The Paper element containing the ...
I am currently working on developing a nodejs application with mysql and my objective is to have my controllers and messages separated into different files. Below are examples of what I am aiming for: First, here is a snippet from my auth controller file: ...
I'm currently working on a project and following a tutorial to help me create a navigation bar. The tutorial I am using can be found here: https://www.youtube.com/watch?v=gXkqy0b4M5g. So far, I have only reached the 22:05 mark in the video. I have su ...
Hello fellow developers... I'm currently facing an issue while trying to dynamically populate a data table with information fetched through a fetch request and stored in a Vuex instance variable. Here is the relevant code snippet: <script> impo ...
Check out this HTML snippet: $html .= " <td><div class='edit_course' data-id='{$id}' data-type='_title' contenteditable='true'>{$obj->title}</div></td>"; Next, see the jQuery code below: ...
I'm new to AngularJS and I'm a bit confused about the concepts of GET, PUT requests. I am currently working on an app where I display a list of users on one page, and on another page, I have a form with three buttons. My main focus is on the "Con ...
I am currently troubleshooting an issue with the ajax response in my Wordpress plugin script. Whenever I try to retrieve a json file using jQuery.ajax, I receive {readyState: 1} as the result. Even when setting async: false, the response is always plain te ...
Illustration ` function1(){ ------- main function execution function2(){ ------child function execution } } ` I must invoke function2 in TypeScript ...
I am trying to retrieve the result of a calculation in my action controller by calling the action using an AJAX HTTP POST request. I want to capture the value of the calculation and display it in a div element. However, I am unsure whether I should use HTT ...
Currently using the 2015 version of Visual Studio Community, I am facing an issue while working on a typescript project. Whenever I make modifications to the code, debug it, and save it using ctrl + s followed by refreshing the browser with ctrl + r, the c ...
modifications: { babelSetup?: TransformationModifier<babel.Configuration>, } = {} While examining some code in a React project, I came across the above snippet that is passed as an argument to a function. As far as I can tell, the modifications p ...
Can someone help me understand how to fetch data using a loop in Vue.js version 3 when working with queries? I am trying to retrieve an object based on its id, which is obtained from the URL. However, I seem to be facing some difficulties. Any guidance wou ...
I am currently facing an issue with the ajax vote implementation on my article model: @csrf_exempt @login_required def like(request): args = {} if request.method == 'POST': user = request.POST.get('user') lu= re ...
Currently, I am working on an application using Stenciljs and have created a custom element like this: <custom-alert alertType="warning" alertId="warningMessage" hide>Be warned</custom-alert> The challenge arises when attem ...
Currently, I am working with Rails 6 and webpack in my project. I am interested in integrating the library jquery-textcomplete, but I am unsure about how to properly include it in the application.js file. Here are the steps I have taken so far: I instal ...
I am encountering an issue with the Nivo jQuery slider on my HTTPS website, as it appears to be generating a mixed content error in Internet Explorer 8. Despite posting on the Dev7 Studios forum and conducting extensive research on the IE 8 mixed content ...
I've been trying to include a specific phone number using the <a href> tag within the innerHTML. I attempted using both double and single quotes. In the first case, nothing happens at all. In the second case, although the phone number appears, ...
I have a unique dictionary structure displayed below. My goal is to populate it with values in a specific way. It all begins here var animals = { flying : {}, underground : {}, aquatic : {}, desert : {} }; To illustrat ...
My ajax function handles uploading comments to a form, which then returns the same string. If successful, the comment is added to a comment box and the input text is cleared. The issue arises when a user adds another comment; the new comment is appended w ...