I'm trying to make several AJAX calls (let's say 2) using promises. Basically I want to be able to merge the two responses together, perform some analysis on them as a whole, then spit out a response.
Right now, I have:
var responseArray = [];
for (var i=0; i<letsSayTwo; i++) {
responseArray.push(someAjaxCall(data));
};
responseArray.done(function(response) {
var spit = someAnalysis(response);
console.log(spit);
});
responseArray.fail(function(response) {
console.log('fail');
});
As it stands, I'm getting an "Uncaught TypeError: Object [object Array] has no method 'done'" error in console. Am I correct in thinking that I can't use this method? I looked into using the following bit of code from (http://gregfranko.com/blog/jquery-best-practices/) but I can't seem to get the response that I need.
$.when.apply(this, responseArray).then(function(response) {
console.log(response);
});
Instead, what I get is [response, "success", response] where the first response is the correct return response for one of the AJAX calls and the last response is the actual call itself. How should I go about getting the correct responses from both AJAX calls??
I hope this all makes sense. Thanks!
As it stands, I'm getting an Uncaught TypeError: Object [object Array] has no method 'done' error in console. Am I correct in thinking that I can't use this method?
Not on arrays, yes. You can call this method only on Promise and Deferred objects, like the one produced by $.when.apply(this, responseArray)
… but I can't seem to get the response that I need. Instead, what I get is [response, "success", response] where the first response is the correct return response for one of the AJAX calls and the last response is the actual call itself.
As stated in the docs for $.when, it resolves the result promise with multiple arguments - and when the input promises themselves did yield multiple values (such as $.ajax does), each argument is an arguments object of the respective promise resolution. You were only getting the first of them with response, but there are responseArray.length (letsSayTwo) arguments to the callback.
How should I go about getting the correct responses from both AJAX calls?
You want to extract the first item (response data) from each arguments object, so you can use map:
$.when.apply(this, responseArray).done(function() {
var responses = $.map(arguments, function(args) { return args[0]; }),
spit = someAnalysis(responses);
console.log(spit);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.log('fail: '+textStatus);
});
Related
Im trying to get a json object from a http call with the following line.
var u = $http.get("http://localhost:8580/jettyjspconfiguration-example/sql?loc=locc");
When I log it
console.log(u);
I dont get the json in return
Object { $$state: Object, success: $http/promise.success(), error: $http/promise.error()
How do i just make it return as a json string? Im using it in a factory if that matters. Thanks.
$http.get doesn't return the value which have been sent by API. It only returns the object of HttpPromise. To get the value you need to call the then function on the u
var u = $http.get("http://localhost:8580/jettyjspconfiguration-example/sql?loc=locc");
u.then(function(response){
var yourVar = response.data;
console.log(yourVar);
});
For more see the Documentation
Assigning the http request to a variable doesnot mak the service call. You need to make the call as
var u = $http.get("http://localhost:8580/jettyjspconfiguration-example/sql?loc=locc");
$scope.ResponeData = null;
u.then(function(response){
// Your response will be available here only
$scope.ResponeData = response;
});
You can find more details about the promises and web service call here.
When you perform an HTTP request, this request is not completed instantly, but rather it's completed asynchronously. So what happens is that when the request is made you get a sort of token (a Promise) that you can keep track of while the request is 'in the air'.
This promise is the object you log when you type:
var u = $http.get("http://localhost:8580/jettyjspconfiguration-example/sql?loc=locc");
console.log(u);
To 'keep track' of this promise you can supply it with functions, somewhat similar to event handlers by using the then, error, success, and finally functions.
So here's what happens:
// Start the request and get a promise that an answer will eventually come.
var u = $http.get("http://localhost:8580/jettyjspconfiguration-example/sql?loc=locc");
// The request is handled asynchronously, so all we have now is the promise that
// at some time there will be a result.
console.log(u);
// Assign 'event handlers' to the promise
u.then(function(result) {
// This 'event handler' function is called when the async process completes
// successfully. You can now use the data as you please
doFancyStuffWithResultData(result.data);
}, function(error) {
// This 'event handler' function is called when the async process has an error
console.error('Ohnoz, things went wrong', error);
});
Note that I put 'event handler' in quotes because it helps to think of the functions as like-'event handlers', but there are some differences. Have a look at the documentation for the $q service for more information on what Promises are and how they work.
Disclaimer: I'm new to ES6 and promises in general so its possible my approach is fundamentally wrong.
The Problem
I have an api that returns paged data. That is it returns a certain number of objects for a collection and if there's more data it returns a Next property in the response body with the url to get the next set of data. The data will eventually feed the autocomplete on a text input.
To be specific, if my collection endpoint is called /Tickets the response would look like:
{
Next: "/Tickets?skip=100&take=100"
Items: [ ... an array of the first 100 items ... ]
}
My current solution to get all the ticket data would be to
Make a new promise for the returning the whole combined set of data
"Loop" the ajax calls by chaining dones until there is no more Next value
Resolve the promise
getTickets(filterValue) {
let fullSetPromise = new Promise();
let fullSet = [];
// This gets called recursively
let append = function(previousResult) {
fullSet.concat(previousResult.Items);
// Loop!
if(previousResult.Next) {
$.ajax({
url: previousResult.Next
})
.done(append)
.catch(reason => fullSetPromise.reject(reason));
}
else {
fullSetPromise.resolve(fullSet);
}
}
// We set things off by making the request for the first 100
$.ajax({
url: `/Tickets?skip=0&take=100&filter=${filterValue}`
})
.done(append)
.catch(reason => fullSetPromise.reject(reason));
return fullSetPromise;
}
Eventually the promise is used by the frontend for autocomplete on a text input. Ideally I'd like to be able to abort the previous call when new input comes in.
inputChanged(e) {
this.oldTicketPromise.abort();
this.oldTicketPromise =
Api.GetTickets(e.target.value).then(updateListWithResults);
}
I am aware of debouncing. But that just means the problem happens every n seconds instead of on every key press.
I know the jqxhr object has an abort() property on it and I'd like that to be available to the caller somehow. But because there are multiple jqXHR objects used in GetTickets I'm not sure how to handle this.
So my main 2 questions are:
What is the appropriate way to consume paged data from an api while returning a promise.
How can the returned promise be made abortable?
Side question:
I feel like if I don't catch the errors then my "wrapper" promise will swallow any thrown errors. Is that a correct assumption?
Note the javascript code might have errors. It's mostly demonstrative for the logic.
Edit: Solved
I have solved this by combining this answer https://stackoverflow.com/a/30235261/730326 with an array of xhrs as suggested in the comments. I will add a proper answer with code when I find the time.
I'm using jQuery ajax to request data which will then be made into different kinds of charts or tables.
I've put the queries I want to run into an object and send the requests. runQuery() returns a jQuery promise. The data returned when the promise is done is correct. [Edit]Since the ajax requests run asynchronously they may not come back in the order they were issued [/EDIT] and I have no way of know which query the returned data was for.
function refreshData(){
for(var key in baseQueries){
runQuery(baseQueries[key])
.done(function(data){
console.log("Query data for "+key);
// want to call different charting functions
// based upon which results are returned
});
}
};
runQuery(obj) { // "public" function
var params = $.extend({},defaults,obj);
return sendRequest(queryUrl,params)
}
sendRequest(url,data,method){ // "private" function
method = method || "GET";
return $.ajax({
type:method,
url:url,
dataType:"json",
data:data
})
.fail(function(error){
console.log(error);
});
}
In this case the console logs the value of key during the last iteration over the baseQueries object. For example if there are three items in my baseQueries object and the the last item in my baseQueries object is
"This-is-the-last-query":"queryparam1,queryparam2,etc"
Then when all three of the ajax calls resolve I get three logs of "This-is-the-last-query". Which is not helpful because it doesn't tell me which query the data belongs to.
This is similar to the idea of the infamous javascript loop issue but I really don't see how the answer of attaching the value to a DOM element could be used here.
How do I match up which query call goes with which promise? How to I pass the key through the ajax call and return it with the promise data.
Edit
Don't think this is a duplicate of the indicated thread. I see how they are related, but not how to use that to solve this. Suggested duplicate doesn't mention jquery, ajax, promises, or asynchronous issues. It is also marked as a duplicate for another thread that doesn't mention any of those things either.
The solution shown either involves using the dom element to hold the information (which doesn't apply here) needed for the onclick or by adding a closure, but I don't see how to do that when there is already data being returned.
If you pass jQuery ajax a parameter that it knows nothing about, it ignores it and you can access it later.
Here we set a parameter for your extra value (mykey) then we have access to it later for the instance we are using:
function refreshData() {
for (var key in baseQueries) {
runQuery(baseQueries[key], key)
.done(function(data) {
console.log("Query data for " + this.myKey);
// "this" here is the ajax for which the promise (ajax) gets resolved,
// and we return that promise so it works here.
// want to call different charting functions
// based upon which results are returned
});
}
};
runQuery(obj,key) { // "public" function
var params = $.extend({}, defaults, obj);
return sendRequest(queryUrl, params,,key)
}
sendRequest(url, data, method, key) { // "private" function
method = method || "GET";
return $.ajax({
type: method,
url: url,
dataType: "json",
data: data,
myKey:key
})
.fail(function(error) {
console.log(error);
});
}
if you want to check if jquery promise is resolved you can check with jqueryPromise.state() which returns either pending, resolved or rejected depending on state.
If you are sending multiple ajax requests and you want to know when they are completed you can put them into array ([$.ajax(...),$.ajax(...)]) and pass it to
$.when like
var requests = [$.ajax(...),$.ajax(...)];
$.when.apply($, requests).done(function() {
console.log('all requests completed');
});
if you want to build something complex with promises I would suggest using bluebird or less complex rsvp
The entityManager instance is calling fail callback even on success.
Checking the network activity, the requests returns 200 and with expected data.
If I remove the .fail() method from the chain it works just fine, with it I get that the error object is undefined.
My WebAPI is running with CORS enabled and as we're in early development, everything is fully allowed (headers, methods, any origin, credentials).
Here is the JavaScript code:
function getResumoPromocoes() {
var resumoPromocoes = [];
var orderBy = "visualizacoes";
return EntityQuery.from("Promocoes")
.select("id, titulo, descricao, iniciaEm, expiraEm")
.orderBy(orderBy)
.toType("Promocao")
.using(manager)
.execute()
.then(function(data) {
resumoPromocoes = data.results;
log("Resumo das Promoções recebidas", resumoPromocoes.length, true);
return resumoPromocoes;
})
.fail(_queryFailed(error));
}
Is it proper to pass the fail callback after the success one in the .then() method? Same thing with .fail()?
Not sure if this is the issue but the ";" after the then clause is almost certainly an error and the argument to '.fail' needs to be a function not the result of executing a function. So try this instead.
.then(function(data) {
...
})
.fail(_queryFailed);
I return a resource with a URL
$resource("http://foo.com/bar.json").get().
$promise.then(function(data){ $scope.result = data},
function(error){ $scope.msg = "error" } );
Resource returns
["item1"...."item_n",.....,"$promise", "$resolved", "$get", "$save", "$query", "$remove", "$delete"]
Why do I get all those objects in my data set. I'm guessing $promise just returns all this and waits for the server response. But once I have the server response where can I just get my server data without the Promise jargon?
If you look at the angular source here:
https://github.com/angular/angular.js/blob/master/src/ngResource/resource.js#L505
There is a toJSON method on the Resource prototype chain that will accomplish this for you.
For example:
$resource("http://foo.com/bar.json").get(function(res) {
$scope.result = res.toJSON();
});
You need to return wrapped result like {'result': { 'some_key': 'some_val' }} from your backend.
Or just do like described above.
Diary.getSharedWithMe(function(data) {
delete data.$promise;
delete data.$resolved;
_self.sharedDiariesWithMe = data;
}, function(error) {
console.log(error)
});
$resource returns an object or array that will have your data when the call completes. All those functions are there to help you out and $resource is mainly intended for CRUD operations. If you want the data, you have to wait for it to get returned so you might as well use the promise. If you want to strip all of those properties you can use angular.toJson to convert it to json, but angular does that for you when posting it back to a resource or $http call so you shouldn't have to.
$scope.data = $resource("http://foo.com/bar.json").get();
// $scope.data does not have your data yet, it will be
// populated with your data when the AJAX call completes
...
// later in a call from a save button maybe you can just do
// this to post your changes back:
$scope.data.$save();
So in case someone else is stumbling here and didn't understand promises/angularjs here is what is going on. When you use .then() or .get() you get a promise and some helper functions all in the same object. This is awesome because then you don't worry about callbacks being defined and whether data is available because the promise object always has some properties. This object contains your raw data in another object within. So the promise object is nested, you just have to reference the data object within when the data is ready.
Here's what I was doing
$resource("http://foo.com/bar.json").get().
$promise.then(function(data){ $scope.result = data},
//data is actually a promise object.
function(error){ $scope.msg = "error" } );
promise object
Note the data is actually under another object called "data". So in your success callback to get just the data you should do in this case: data.data
To automatically remove them from every request, you can add an interceptor:
angular.module('app').config(config);
config.$inject = ['$httpProvider'];
function config($httpProvider) {
$httpProvider.interceptors.push(interceptor);
}
interceptor.$inject = [];
function interceptor() {
return {
request: (config) => {
if (config.data) {
delete config.data.$promise;
delete config.data.$resolved;
}
return config;
}
};
}