In reflux, how can I get data from asp.net web api
i'am using reflux reactions. From the reflux store I wrote an action to get data from the asp.net web api, I think there is only one way to get the data that is used for ajax, someone speaks to me, I can get the data using the jQuery plugin, but I am not know I don’t believe it because $ .ajax is the best way. I search everything on google but I can't see how to resolve this. If you know something that needs to be solved please share with me, I really thank you.
Also, I had a problem with ajax global and local variable. Review my code, you can see bold text that never returns, the problem that remains with the success block, the var list is not updated when outside the block. What's the problem with this? how can i fix this error?
Thanks again!
(function (Reflux, WorkHistoryActions, global) {
global.workhistoryStore = Reflux.createStore({
listenables: [WorkHistoryActions],
init: function () {
this.storyArr = [];
},
getItems: function (resume_id) {
console.log(resume_id)
**var list = [];**
$.ajax({
type: "get",
url: global.getHost() + "/api/workhistories/6969607988340821009",
dataType: 'json',
crossDomain: true,
success: function (data) {
$.each(data, function (i, v) {
**list.push(v);**
})
}
});
**return list;**
},
})
source to share
I'm not sure how to do this when reflecting, but in a normal flux architecture you would do this:
getItems: function (resume_id) {
$.ajax({
type: "get",
url: global.getHost() + "/api/workhistories/6969607988340821009",
dataType: 'json',
crossDomain: true,
success: function(result) {
workHistoryActionCreator.receiveItems(result);
},
error: function(error) {
workHistoryActionCreator.failToReceiveItems(error);
}
});
}
The store registers with the manager for the RECEIVED_WORK_HISTORY_ITEMS and FAILED_TO_RECEIVE_WORK_HISTORY_ITEMS actions, sets its data, and then fires the change event.
source to share
JavaScript is an event driven system where AJAX requests are also Async and the response from the server is received asynchronously.
Using it async: false
is bad practice as it will freeze your application and block any concurrent execution.
So with async: true
(which is the default) you cannot call a function that makes an AJAX call and returns a response.
Solution # 1: Callbacks (old school)
Modify the function getItems
to receive another parameter, which is a callback function, when you receive a response from the server, call that callback function and pass list
as a parameter to call this function.
Example
getItems: function(resume_id, callback) {
$.ajax({
type: "get",
url: global.getHost() + "/api/workhistories/6969607988340821009",
dataType: 'json',
crossDomain: true,
success: function (data) {
var list = [];
$.each(data, function (i, v) {
list.push(v);
})
callback(list);
}
});
// Return nothing
}
How to use?
getItem(resume_id, function(list){
});
Solution # 2: JavaScript Promises (Recommended)
Return a JavaScript promise and set a callback using a function then()
. I am using kriskowal promise fulfillment
Example
getItems: function (resume_id) {
var deferred = Q.defer();
$.ajax({
type: "get",
url: global.getHost() + "/api/workhistories/6969607988340821009",
dataType: 'json',
crossDomain: true,
success: function (data) {
var list = [];
$.each(data, function (i, v) {
list.push(v);
});
deferred.resolve(list);
}
});
return deferred.promise;
}
How to use?
getItem(resume_id).then(function(list){
// use list
});
source to share