I'm using promise but sometimes I can't get JSON from various reason in one case, how can I fire up done even if some of JSON is missing, with this code at the moment I'm having only failed message
$.when(
arrayResults[0] ? $.getJSON("url") : null,
arrayResults[1] ? $.getJSON("url") : null,
arrayResults[2] ? $.getJSON("url") : null
).done(function () { }).fail(function () {
console.log('Failed');
});
You can use deferred.always(cb):
$.when(
arrayResults[0] ? $.getJSON("url") : null,
arrayResults[1] ? $.getJSON("url") : null,
arrayResults[2] ? $.getJSON("url") : null
)
.done(function () { console.log('I will run when the promise was resolved') })
.fail(function () { console.log('I will run when the promise was rejected') })
.always(function() { console.log('I will always fire, regardless of previous results') })
See further information here: https://api.jquery.com/deferred.always/
If you are using jQuery v3+ it is Promises A+ compliant so you can add catch() to the request promise
Whenever you return from within a catch it resolves the prior promise and passes whatever you return to the next then() in the promise chain
function getData(url){
return $.getJSON(url)
.then(data=>data)
.catch(resolveFailure)
}
function resolveFailure(jqXhr) {
// return whatever you want here. I added the status in case that is of interest
// could return `false` or string or whatever
// can also log any issues back to server if needed
return {
error: true,
status: jqXhr.status,
statusText: jqXhr.statusText
};
}
var req = getData('https://api.myjson.com/bins/l9ywp'),
req2 = getData('https://httpbin.org/FAIL'),
req3 = getData('https://api.myjson.com/bins/l9ywp');
// could also replace `$.when with `Promise.all()`
$.when(req, req2, req3).then(function(r1, r2, r3) {
// validate the arguments based on whatever you return in the catch()
console.log('r1', r1);
console.log('r2', r2);// object returned from catch()
console.log('r3', r3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Related
I make Ajax requests with a Promise and usually handle errors the same way. So e.g. if a 404 happens, then I would just display a standard error message by default. But in some cases I want to do something else.
Note: I'm using ExtJS 4 to do the actual Ajax request, but this issue is not specific to ExtJS. ExtJS does not use Promises, so I'm basically converting their API to a Promise API.
This is the code:
var defaultErrorHandler = function(response) {
// do some default stuff like displaying an error message
};
var ajaxRequest = function(config) {
return new Promise(function(fulfill, reject) {
var ajaxCfg = Ext.apply({}, {
success: function(response) {
var data = Ext.decode(response.responseText);
if (data.success) {
fulfill(data);
} else {
defaultErrorHandler(response);
reject(response);
}
},
failure: function(response) {
defaultErrorHandler(response);
reject(response);
}
}, config);
Ext.Ajax.request(ajaxCfg);
});
};
// usage without special error handling:
ajaxRequest({url: '/some/request.json'}).then(function(data) {
// do something
});
// usage with special error handling:
ajaxRequest({url: '/some/request.json'}).then(function(data) {
// do something
}, function(response) {
// do some additional error handling
});
Now the problem: The "usage without special error handling" does not work, because if I do not provide a reject function, it will throw an error. To fix this, I am forced to provide an empty function, like so:
// usage without special error handling:
ajaxRequest({url: '/some/request.json'}).then(function(data) {
// do something
}, function() {});
Having to provide an empty function every time (and in my code base this will be hundreds of times) is ugly, so I was hoping there was a more elegant solution.
I also do not want to use catch() since that would catch ALL errors thrown, even if it happens in the fulfill function. But actual errors happening in my code should not be handled, they should appear in the console.
There is no such thing a "default error handler for all promises", unless you are looking to provide an unhandled rejection handler. That would however not be restricted to the promises for your ajax requests.
The simplest and best solution would be to just expose your defaultErrorHandler and have every caller explicitly pass it the then invocation on your promise. If they don't want to use it, they either need to provide their own special error handler or they will get a rejected promise. This solution provides maximum flexibility, such as allowing to handle the rejection further down the chain.
If that is not what you want to do, but instead require immediate handling of the ajax error, your best bet is to override the then method of your returned promises:
function defaultingThen(onfulfill, onreject = defaultErrorHandler) {
return Promise.prototype.then.call(this, onfulfill, onreject);
}
function ajaxRequest(config) {
return Object.assign(new Promise(function(resolve, reject) {
Ext.Ajax.request({
...config,
success: function(response) {
var data = Ext.decode(response.responseText);
if (data.success) {
resolve(data);
} else {
reject(response);
}
},
failure: reject,
});
}), {
then: defaultingThen,
});
}
I got this code (using jquery)
function getData(applyFunction, callback) {
$.when(
$.getJSON("http://www.mocky.io/v2/59d72b5b120000c902cb1b4f"),
$.getJSON("http://www.mocky.io/v2/59d72b5b120000c902cb1b4f"),
).done(function(
firstData,
secondData
){
callback(applyFunction, {
firstDataToApply: { data: firstData.popup },
secondDataToApply: { data: secondData.popup }
})
})
}
Is there a way to catch separate errors from the $.getJSON part(or the when part), log those errors, and still be able to send both firstData and secondData(at the same time) to the callback function?
(I'm aware that if some or both $.getJSON fail I'd be sending empty data to the callback, and would have to null check before getting popup)
sorry for the confusing post, thanks in advance
Yes. Promises are pipelines and each handler in the pipeline can transform the value or error passing through, so you can turn a failure into a "success with null" if that's really want you want to do by adding a catch handler and returning null (or whatever value you want to transform the error into) from it. See the catch calls below and also the comments:
function getData(applyFunction, callback) {
$.when(
$.getJSON("http://www.mocky.io/v2/59d72b5b120000c902cb1b4f")
.catch(function(err) {
console.error(err);
return null;
}),
$.getJSON("http://www.mocky.io/v2/59d72b5b120000c902cb1b4f")
.catch(function(err) {
console.error(err);
return null;
})
).done(function(firstData, secondData) {
callback(applyFunction, {
firstDataToApply: {
data: firstData.popup // You'll need checks on this!
},
secondDataToApply: {
data: secondData.popup // And this!
}
});
});
}
Of course, if you're going to do this more than once or twice, you can avoid repeating yourself with a function:
function getJSONOrNull(url) {
return $.getJSON(url).catch(function(err) {
console.error(err);
return null;
});
}
then
function getData(applyFunction, callback) {
$.when(
getJSONOrNull("http://www.mocky.io/v2/59d72b5b120000c902cb1b4f"),
getJSONOrNull("http://www.mocky.io/v2/59d72b5b120000c902cb1b4f")
).done(function(firstData, secondData) {
callback(applyFunction, {
firstDataToApply: {
data: firstData.popup // You'll need checks on this!
},
secondDataToApply: {
data: secondData.popup // And this!
}
});
});
}
I've just started using bluebird promises and am getting a confusing error
Code Abstract
var
jQueryPostJSON = function jQueryPostJSON(url, data) {
return Promise.resolve(
jQuery.ajax({
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST",
url: url,
data: JSON.stringify(data)
})
).then(function(responseData) {
console.log("jQueryPostJSON response " + JSON.stringify(responseData, null, 2));
return responseData;
});
},
completeTask = function completeTask(task, variables) {
console.log("completeTask called for taskId: "+task.id);
//FIXME reform variables according to REST API docs
var variables = {
"action" : "complete",
"variables" : []
};
spin.start();
return jQueryPostJSON(hostUrl + 'service/runtime/tasks/'+task.id, variables)
.then(function() {
gwl.grrr({
msg: "Completed Task. Definition Key: " + task.taskDefinitionKey,
type: "success",
displaySec: 3
});
spin.stop();
return null;
});
}
The jQueryPostJSON function seems to work fine as is when used else where, but in that case there is data returned from the server.
When it's used within complete task, the POST is successful as can be seen on the server side, but the then function is never called instead in the console I get the error
completeTask called for taskId: 102552
bundle.js:20945 spin target: [object HTMLDivElement]
bundle.js:20968 spinner started
bundle.js:1403 Warning: a promise was created in a handler but was not returned from it
at jQueryPostJSON (http://localhost:9000/dist/bundle.js:20648:22)
at Object.completeTask (http://localhost:9000/dist/bundle.js:20743:14)
at http://localhost:9000/dist/bundle.js:21051:15
From previous event:
at HTMLDocument.<anonymous> (http://localhost:9000/dist/bundle.js:21050:10)
at HTMLDocument.handleObj.handler (http://localhost:9000/dist/bundle.js:5892:30)
at HTMLDocument.jQuery.event.dispatch (http://localhost:9000/dist/bundle.js:10341:9)
at HTMLDocument.elemData.handle (http://localhost:9000/dist/bundle.js:10027:28)
bundle.js:1403 Unhandled rejection (<{"readyState":4,"responseText":"","sta...>, no stack trace)
The warning I get the reason for, that's not the issue.
It's the Unhandled rejection and the fact that there was in fact no error from the POST.
line 21050 is here I am testing the combination of these to functions from separate modules
jQuery(document).bind('keydown', 'ctrl+]', function() {
console.log("test key pressed");
api.getCurrentProcessInstanceTask()
.then(function(task) {
api.completeTask(task);
});
});
Output from the first function call api.getCurrentProcessInstanceTask() seems to indicate it is working correctly, but here it is anyway
getCurrentProcessInstanceTask = function getCurrentProcessInstanceTask() {
if (!currentProcess || !currentProcess.id) {
return Promise.reject(new Error("no currentProcess is set, cannot get active task"));
}
var processInstanceId = currentProcess.id;
return Promise.resolve(jQuery.get(hostUrl + "service/runtime/tasks", {
processInstanceId: processInstanceId
}))
.then(function(data) {
console.log("response: " + JSON.stringify(data, null, 2));
currentProcess.tasks = data.data;
// if(data.data.length > 1){
// throw new Error("getCurrentProcessInstanceTask expects single task result. Result listed "+data.data.length+" tasks!");
// }
console.log("returning task id: "+data.data[0].id);
return data.data[0];
});
},
You're getting the warning because you are - as it says - not returning the promise from the then handler.
Where the rejection is coming from would best be tracked by catching it and logging it. That there is no stack trace suggests that you (or one of the libs you use) is throwing a plain object that is not an Error. Try finding and fixing that.
Your call should look like this:
api.getCurrentProcessInstanceTask().then(function(task) {
return api.completeTask(task);
// ^^^^^^
}).catch(function(err) {
// ^^^^^
console.error(err);
});
I am trying to implement the advanced push targeting from cloud code (background job) using parse.com service. I have added the day as a field in the Installation object.
I made it work if I have only one condition, i.e. day equals 1, using following snippet
var pushQuery = new Parse.Query(Parse.Installation);
pushQuery.equalTo("day",1);
Parse.Push.send({
where: pushQuery,
data: {
"content-available" : "1",
alert : "Message day 1!",
sound : "default"
}}, {
success: function() {
// Push was successful
},
error: function(error) {
// Handle error
}}).then(function() {
// Set the job's success status
status.success("Job finished successfully.");
}, function(error) {
// Set the job's error status
status.error("Uh oh, something went wrong.");
});
Reference: Push Notification Java Script guide
My next step is sending notifications to 20 queries (0 <= day < 20) and for each query send message according to day number. Calling function 20 times seems to me ugly, may I anyhow iterate, calling each time in loop Parse.Push.send function?
I solved my problem using Parse.Promise.when(promises)
Promises are a little bit magical, in that they let you chain them without nesting. If a callback for a promise returns a new promise, then the first one will not be resolved until the second one is. This lets you perform multiple actions without incurring the pyramid code you would get with callbacks.
function scheduleWordsForDay(day)
{
var pushQuery = new Parse.Query(Parse.Installation);
pushQuery.equalTo("day",day);
pushQuery.exists("deviceToken");
var promise = new Parse.Promise();
Parse.Push.send({
where: pushQuery,
data: {
alert : "word" + day
}}, { success: function() {
// Push was successful
},
error: function(error) {
}}).then (function(result){
//Marks this promise as fulfilled,
//firing any callbacks waiting on it.
promise.resolve(result);
}, function(error) {
//Marks this promise as fulfilled,
//firing any callbacks waiting on it.
promise.reject(error);
});
return promise;
}
Parse.Cloud.job("scheduleWordNotification", function(request, status)
{
var promiseArray = [];
for (var i = 0; i < 100; i++) {
var promise = scheduleWordsForDay(i);
promiseArray.push(promise);
}
//Returns a new promise that is
//fulfilled when all of the input promises are resolved.
Parse.Promise.when(promiseArray).then(function(result) {
console.log("success promise!!")
status.success("success promise!!");
}, function(error) {
console.error("Promise Error: " + error.message);
status.error(error);
});
});
I need to be able to execute a series of asynchronous events in turn, but the execution of each depends on the result of the last. Is there anyway to achieve this dynamically? Consider the following code as an example of what I am trying to achieve.
$scope.queries = [
{
id: 1,
action: function(){
var deferred = $q.defer();
Service.something($.param(someData)).$promise.then(function(response){
deferred.resolve(response);
}, function(error){
deferred.reject(error);
});
return deferred.promise;
}
},{
id: 2,
action: function(){
var deferred = $q.defer();
Service.something($.param(someData)).$promise.then(function(response){
deferred.resolve(response);
}, function(error){
deferred.reject(error);
});
return deferred.promise;
}
},{
id: 3,
action: function(){
var deferred = $q.defer();
Service.something($.param(someData)).$promise.then(function(response){
deferred.resolve(response);
}, function(error){
deferred.reject(error);
});
return deferred.promise;
}
},
];
$scope.stop = false;
angular.forEach($scope.queries, function(query) {
if ($scope.stop === false) {
query.action().then(function(result){
//Everything is fine so we can continue to the next request
}, function(error) {
//This request produced an error so we need to stop
$scope.stop = true;
//Display error here
});
}
});
The main problem is how do I get the forEach to wait for the result of each action before it continues to the next?
Any help in understand this and finding a solution would be great. The only solution I can think of is manually chaining the three requests using chained .then()'s.
Thank you.
Usually when I want to run things in sequence, I use a for or foreach loop, promises are no different and require no magic, you just have to specify the continuation with .then
var promise = $q.when();
angular.forEach($scope.queries, function(query) {
promise = promise.then(function(){
// no need for scope.stop, a rejection will act like a throw and it'll
// stop executing code
return query.action();
});
});
If you want to know when they're all done, you can do:
promise.then(function(){
alert("All actions done!");
});
Note, your service code has the deferred anti pattern, you can convert code that looks like:
var deferred = $q.defer();
Service.something($.param(someData)).$promise.then(function(response){
deferred.resolve(response);
}, function(error){
deferred.reject(error);
});
return deferred.promise;
To simply do:
return Service.something($.param(someData)).$promise;