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,
});
}
Related
Could you check my code:
.state('addNewGroup', {
url: '/group/new',
resolve:{
"checkPermission": function ($state, checkPermission) {
checkPermission.checkPermission()
.then(function (result) {
if (result) {
alert('Hello');
} else {
alert('access denied');
}
})
},
"otherStuff": function () {
console.log("Should execute only if result in 'checkPremission' is true");
}
},
});
PROBLEM
I two promises in the routing configuration.
Is it possible to resolve only specific promise?
Let's suppose I have 5 promises to resolve and I want to resolve them all only if "checkPremission" is true. In other cases I don't want to resolve it all.
Is it possible or I should use different logic.
You can make the next promise wait for the previous one by injecting it as a dependency:
resolve: {
firstResolve: function() {
return 'A result';
},
nextResolve: function(firstResolve) {
// firstResolve has the value 'A result' here
}
}
Technically, the second resolve will execute, but you can base your logic on the result of the first one.
The main problem here is that when you write code like this, I think that all the functions (after the key) is executed asynchronously. But as I saw (if true), you have to wait for the result to decide what is the next action. So, why don't you put your code (may be if-else) to decide the functions which would be called in the successful and failed function of promise.
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'm using qwest to query my endpoint as shown below, the onGetResourceCompleted handler fires as expected but data is undefined. Why?
var Actions = Reflux.createActions({
'getResource': { asyncResult: true }
});
Actions.getResource.listenAndPromise(function (id) {
return qwest.get('http://localhost:8000/my-data/'+id, null, { withCredentials: true });
});
var MyStore = Reflux.createStore({
listenables: Actions,
init: function () {
Actions.getResource('');
},
onGetResourceCompleted: function (data) {
console.log('OK', data); // Get's called but data is undefined. Why?
}
});
I can see the data loads correctly by looking at dev tools as well as calling qwest in isolation by simply doing:
qwest.get('http://localhost:8000/my-data/'+id, null, { withCredentials: true }).then(function(data) {
console.log('OK', data);
});
Also doing the following works:
ServiceActions.getResource.listen(function (id) {
ServiceActions.getResource.promise(
qwest.get('http://localhost:8000/my-data/'+id, null, { withCredentials: true })
);
});
I've put some comments on the cause of this "confirmed bug" in the original issue you opened at github.com/spoike/refluxjs.
So, though you are using the reflux features the way they are intended, and they're definitely creating a race condition without even returning the race results, I think you're in luck. It turns out the two particular features you're using in this combination with this type of request is a bit redundant when you already have a promise available. I'd recommend you just drop the onGetRequestCompleted handler entirely, and handle completion using the standard promise ways of handling resolved promises, which honestly will give you more flexibility anyways.
For example:
var MyStore = Reflux.createStore({
listenables: Actions,
init: function () {
Actions.getResource('')
.then() <-- this eliminates the need for onGetResourceCompleted
.catch() <-- or this instead/in addition
.finally() <-- or this instead/in additon
},
// no more onGetResourceCompleted
});
I have written a rails back end to my project and when you save or create a new record,among the status 200 and a json representation of the post that was saved.
When I do the following in bacbone:
modelObject = new App.Models.Post();
modelObject.set({title: 'asdasdas', content: 'asdadasdasdasdasd'});
if (modelObject.isValid()){
modelObject.save().then( ... )
}
How do I get the post object that is returned? (assuming the post is successful).
On the rails side, when I do #post.save I also do render json: #post, status: 200 on a successful save in the create action so there is a json object coming back, I just dot know how to access it on the backbone side.
The backbone docs describe few ways how can you get response from server after calling save() function.
For example:
You need to specify error and success callbacks:
var model = new App.Models.Post();
model.set({title: 'some title', content: 'some content'});
var options = {
success: function(model, response){
console.log('success handler');
model.set({id: response.id});
},
error: function(model, xhr){
console.log('error handler');
}
};
Specify wait option to wait response from server before set model attributes:
options.wait = true;
Need to call save function with specified options:
if (model.isValid()) {
model.save({}, options);
}
The modelObject.save() call will return a promise object. You should chain a .done() call to that and pass it in a function, like this:
modelObject.save().done(function(e) {
// handle your response here
});
You could also handle a failure the same way using the .fail() function. Chain them together like this:
modelObject.save().done(function(e) {
// handle your response here
}).fail(function(e) {
// handle failure here
});
Here's another way to write the same code:
var promise = modelObject.save();
promise.done(function(e) {
// handle your response here
});
promise.fail(function(e) {
// handle failure here
});
There is also a .always() that you could chain to always be called:
var promise = modelObject.save();
promise.done(function(e) {
// handle your response here
});
promise.fail(function(e) {
// handle failure here
});
promise.always(function(e) {
// always call this on success or failure
});
I am not able to get chained promises to work as per RSVP documentation. I have a case where I am trying to fetch some data from the server. If for some reason an error occurs, I want to fetch the data from a local file.
I am trying to chain promises for that.
I have created a simplified example. The below example will give an output but is not what I want.
http://emberjs.jsbin.com/cobax/3
App.IndexRoute = Em.Route.extend({
model: function() {
return Ember.$.getJSON('http://test.com/search')
.then(undefined, function(errorObj, error, message) {
return new Promise(function(resolve, reject) {
resolve(model);
}).then(function(response) {
console.info(response.articles);
return response.articles;
});
});
}
});
This example is what I want but it wont call the final 'then'.
http://emberjs.jsbin.com/cobax/3
App.IndexRoute = Em.Route.extend({
model: function() {
return Ember.$.getJSON('http://test.com/search')
.then(undefined, function(errorObj, error, message) {
return new Promise(function(resolve, reject) {
resolve(model);
});
})
.then(function(response) {
console.info(response.articles);
return response.articles;
});
}
});
Basically I want to handle the server/local response from the last 'then' method. I also want keep all the callbacks in a single level.
What is the error in the second code snipped?
Update
As #marcio-junior mentioned, the jquery deferred was the issue. Here is the fixed bin from him.
http://jsbin.com/fimacavu/1/edit
My actual code doesn't return a model object, it makes another getJSON request to a json file. I can't replicate this in a bin as I dont think js bin allows us to host static files. Here is the code but it wont work. It fails due to some js error.
App.IndexRoute = Em.Route.extend({
model: function() {
var cast = Em.RSVP.Promise.cast.bind(Em.RSVP.Promise);
return cast(Ember.$.getJSON('http://test.com/search'))
.then(undefined, function(errorObj, error, message) {
//return Em.RSVP.resolve(model);
return cast(Ember.$.getJSON('data.json'));
})
.then(function(response) {
console.info(response.articles);
return response.articles;
});
}
});
Can you help me with this? These promises are a bit tricky to understand.
Here is the error stack I see
XMLHttpRequest cannot load http://test.com/search. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. localhost/:1
Error while loading route: index ember-canary-1.7.0.js:3916
logToConsole ember-canary-1.7.0.js:3916
defaultActionHandlers.error ember-canary-1.7.0.js:39681
triggerEvent ember-canary-1.7.0.js:39763
trigger ember-canary-1.7.0.js:42317
Transition.trigger ember-canary-1.7.0.js:42162
(anonymous function) ember-canary-1.7.0.js:42017
invokeCallback ember-canary-1.7.0.js:10498
publish ember-canary-1.7.0.js:10168
publishRejection ember-canary-1.7.0.js:10596
(anonymous function) ember-canary-1.7.0.js:15975
DeferredActionQueues.flush ember-canary-1.7.0.js:8610
Backburner.end ember-canary-1.7.0.js:8082
(anonymous function)
You are returning a RSVP promise to a jquery deferred. And jquery deferreds doesn't have the feature of fulfill a rejected promise. So you need to update your sample to use Em.RSVP.Promise.cast(deferred), to transform a deferred in a RSVP promise, which implements the promises/a+ spec and does what you want:
App.IndexRoute = Em.Route.extend({
model: function() {
return Em.RSVP.Promise.cast(Ember.$.getJSON('http://test.com/search'))
.then(undefined, function() {
return getDefaultData();
})
.then(function(response) {
console.info(response.articles);
return response.articles;
});
}
});
Your updated jsbin
Here is the final route code I used. Its simply checks for the my apps api for the results. If its not present, I take the static results from a sample json file. The parsing of the response happens at the end irrespective of where it came from.
var App.IndexRoute = Ember.Route.extend({
model: function() {
var cast = Em.RSVP.Promise.cast.bind(Em.RSVP.Promise);
return cast(Ember.$.getJSON('http://test.com/search'))
.then(undefined, function(error) {
console.info(error);
return Ember.$.getJSON('assets/data.json');
})
.then(function(response) {
console.info(response);
return JSON.parse(response);
});
}
});