I have used ajax calls before, and promises. I thought that the advantage with promises is the simplified programming model and there are no callbacks. I have not seen a scenario where a ajax or promise call bas to be called.
What is the scenario where a Ajax / Promise call should be cancelled? Once an ajax or promise is called to return some data from the server though some API (twitter API for example) via XMLHttpRequest, why that call has to be cancelled?
Related
React documentation suggest to fetch initial data in componentDidMount function. For my it is not intuitive because we could do it sooner in componentWillMount (first function from React component life cycle). In general I think we should start AJAX calls us soon us possible so user doesn't have to wait for them. So why do we have to wait until component is rendered?
My questions are:
Are there any problems with using AJAX in componentWillMount?
Are there any benefits of using AJAX in componentDidMount?
say you do AJAX on componentWillMount
componentWillMount(){
this.serverRequest = $.get(...);
}
Now you have a pending AJAX request. Its a good practice to cancel this request when the component is unmounted
componentWillUnmount: function() {
this.serverRequest.abort();
}
but lets say for whatever reason the component did not mount. you still have your pending ajax request which can not be cancelled anywhere (since component is not mounted, componentWillUnmount won't be reached) thus creating a memory leak.
If you had put the ajax request on componentDidMount you had a guarantee that the componentWillUnmount will fire since component is mounted allowing you to cleanup your request safely
Simply create the component when you have the data and pass it through props. Have the parent component (if you have one) to do the request.
It depends on your task. for example I have used an ajax request in componentWillReceiveProps here. what is your concern exactly? what does your ajax?
When my site first initializes, it queries a server to get back some data. I can't lay anything out on the page until this data gets back. With d3.js, I can use d3.json() to get my data, but because it's asynchronous, I need to put the entire page logic in the callback function. How do I request the data and wait for it to come back?
You're basically doing it the only way. The callback function has to be the one initiating the rest of your code. You don't need all your code in the callback function though, you can introduce indirection. So the callback function will call another function inside which would be what is currently in your callback function.
Using synchronous requests in JavaScript is not recommended as it blocks the whole thread and nothing gets done in the meantime. The user can also not interact well with the webpage.
If it is really what you want, you can do the following (using jQuery):
var jsonData;
jQuery.ajax({
dataType: "json",
url: "jsondatafile.json",
async: false
success: function(data){jsonData = data}
});
However it is not recommended, even by jQuery, as explained here the jQuery.ajax() documentation:
The first letter in Ajax stands for "asynchronous," meaning that the operation occurs in parallel and the order of completion is not guaranteed. The async option to $.ajax() defaults to true, indicating that code execution can continue after the request is made. Setting this option to false (and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.
As a final note, I don't see what prevents you from using whatever function there is in the success attribute in an asynchronous way. Most of the times changing your design to use async requests will be worth it. By experience, debugging a page that uses synchronous requests is a pain (especially when the requests don't get answered...).
I'm fairly new to MVC. In my MVC app when the client initiates a View's javascript function call, I am proceeding where the javascript first calls a method in the controller (via ajax) where it updates session data/database data (a non-action controller method), then a second calls (but part of the same javascript) an action method in the controller to get another view. I am doing this because I think it provides a clean separation between my session state updates/database updates (in the first call) and my viewmodel updates and view push (in the second call). I can then always depend on the session data being correct and ready to be applied to a viewmodel in an action method. Is it a "good" practice to use this approach in general? TIA.
I have been calling the jQuery ajax function on timely basis by using setInterval function.
so when the first response success handler is called and being executed, 2nd request success handler gets called on after the first response handler gets executed since JAVASCRIPT supports only single threaded...and so on(a queue is maintained to process the success handlers)?? is my understanding correct? so there is chance for page blocking ?
this is because of multiple ajax requests, most browsers handle the ajax request and remember it the next time an ajax request to the same url is called and handle it a second time
1st setInterval ajax to abc.html handle [0]
2nd setInterval ajax to abc.html handle [0], [1]
3rd setInterval ajax to abc.html handle [0], [1], [2]
it keeps building and adding to the confusion to change this I add an unique identifier to the user e.g
$.post("myurl.html?randid="+Math.random(), {my: data}).done(function(data){ /*do stuff here*/});
if this is a meant to be loaded for a long time and have a ton of ajax request to the same page instead of just a random number you might want to use a time stamp. for me and most cases the random number works, hope this is enough to get you started.
I feel ackward asking these fundamental questions given that I am not exactly new to web development. But I want to double-check my assumptions nevertheless...
I'm building the recording of unique image views in my application. When a user (not a bot) visits an image page, an Ajax call is made to a back-end process that collects the session info, compares for duplications and stores the visit. I have all my javascript references as well as this call at the bottom of the HTML, just before the </body> element:
$.get(basepath + "image/1329/record/human", function(data){
console.log("Data Loaded: " + data);
});
By default, the call to $.get is made asynchronous. Yet I want to test the following assumptions:
Is it correct that this method ensures that the call to the view recording script is non-blocking for the rest of the UI?
Is it correct that the back-end script will finish once called, regardless of whether the user navigates to another page?
According to jQuery .get reference...
This [$.get()] is a shorthand Ajax function, which is equivalent to:
$.ajax({ url: url, data: data,
success: success, dataType: dataType
});
And $.ajax is asynchronous (i.e. non-blocking) by default, that's what the A in Ajax means.
Also, back-end server code is started in the moment the server receives the request and then runs independently of the client staying on the page or not, unless you implement some kind of mechanism to stop the running service which I suppose you did not.
God bless!
The jQuery.get request you're making is asynchronous and will not block the DOM or other JavaScript from continuing. The get function is a shorthand method which uses jQuery.ajax.
The second question I don't have a solid answer for -- I expect it may depend more on how the back-end code is structured and whether it's told that the session/request has terminated.
API:
jQuery.get()
jQuery.ajax()
that is correct on both counts