I have looked at various questions that talk about when Synchronous requests, how to return data from the Ajax request (with Promises and Callbacks) but nothing seems to answer what I am after.
var FacadeApi = ( function($) {
var endpoint = '/auth/',
self = this,
settings = {
isAuthenticated: false,
authkey: null
};
function init() {
$.ajax( {
url: self.endpoint,
dataType: 'json',
async: true
})
.done( function( `enter code here`data ) {
self.settings.authKey = data.authKey;
self.settings.isAuthenticated = true;
})
.fail( function( error ) {
});
}
var Facade = {
someRequest: function( ) {
$.ajax( {
url: someUri,
dataType: 'json',
data: { authKey: authKey }
})
.done( fuction( data ) {
// does stuff.
});
}
};
init();
return Facade;
}( jQuery ));
My module depends on requesting an authentication key and then having that as part of each request. Until this request is resolved, it can't be used. Which lead me to the async: false in the init function.
In this scenario, is it recommended to 'block' until the init call is completed? Could I achieve what I am after and keep the init request asynchronous?
So if i understand correctly,
You want to make sure that if someone calls somerequest() it should wait till you have the token , which is initiated in a separate request.
I suggest following pattern.
Do not call init() from the beginning.
when you need to call somerequest()
check if you have valid token value.
If token value is not there you can use $.When() such that somerequest() is only called when init() ajax call returns successfully.
Related
My application has a lot of AJAX calls, each of them return a JSON response. Instead of validating the data in each of the the .done() calls, I'm trying compact the code.
What we have so far
$.ajax({
url: 'test',
type: 'GET',
data: {
_token: token
},
dataFilter: function(jsonResponse) {
return isValidJson(jsonResponse);
}
}).done(function(jsonResponse) {
// do things
});
isValidJson(jsonResponse) {
try {
var parsedJson = $.parseJSON(jsonResponse);
if (parsedJson.error == 1) {
notificationController.handleNotification(parsedJson.message, 'error');
return false;
}
} catch (err) {
notificationController.handleNotification('A server-side error occured. Try refreshing if the problem persists.', 'error');
return false;
}
return jsonResponse; // Have to return the original data not true
}
The expected behavior is that if dataFilter returns false, it will trigger .fail(), if it returns true then it will continue to .done(). Instead, it just continues to .done() with the result of isValidJson().
Is there also a way to make .fail() do something standard like send a notification to the user without having to put it under every AJAX call?
Easiest way is to create a shorthand for $.ajax, by extending it.
Extending the AJAX call
jQuery.extend({
myAjax: function(params){
// Here we can modify the parameters and override them e.g. making 'error:' do something different
// If we want to add a default 'error:' callback
params.error = function() {
console.log('its failed');
};
// or you can specify data parse here
if (params.success && typeof params.success == 'function') {
var successCallback = params.success;
var ourCallback = function(responseJson) {
if (isValidJson(responseJson)) { // Validate the data
console.log('The json is valid');
successCallback(responseJson); // Continue to function
} else {
console.log('The json is not valid');
}
}
params.success = ourCallback;
}
return $.ajax(params);
}
});
Now everytime you want to make an AJAX call in your application, you DO NOT use $.ajax({}). Instead, you use $.myAjax({});
Example
$.myAjax({
url: 'domain.com',
type: 'GET',
success: function(data) {
// Do what you'd do normally, the data here is definitely JSON.
},
error: function(data) {}
});
And this special function will handle all errors same way, no need to write those validators every time.
Try to do it like this (Not tested):
var jxhr = $.ajax({
url: 'test',
type: 'GET',
data: {
_token: token
},
dataFilter: function(jsonResponse) {
if (!isValidJson(jsonResponse)) {
jxhr.abort();
}
return jsonResponse;
}
}).done(function(jsonResponse) {
// do things
});
By using this strategy - you are violating "separation of concern" strategy.
Ajax should resolve or reject according to its action. Not according if response is JSON or not.
A possible solution : ( sure there are also another solutions)
function GetSanitized(d) {
return d.then(function(a) {
if (a.indexOf('{') > -1) //check if json ( just for example)
return $.Deferred().resolve(JSON.parse(a)); //return object
else
return $.Deferred().reject(a); //reject
},
function() {
return $.Deferred().reject("ajax error"); //ajax failed
}
);
}
var ajax = $.Deferred();
GetSanitized(ajax) .then(function (a){alert(" Json p's value is "+a["p"]);},function (a){alert("Error"+a);});
ajax.resolve("{\"p\":2}"); //simulate ajax ok , valid json
//ajax.resolve("\"p\":2}"); //simulate ajax ok , invalid json
//ajax.reject("\"p\":2}"); //simulate ajax bad , valid json
http://jsbin.com/vozoqonuda/2/edit
I have to add customheaders to all ajax requests . I'm able to do this using the following code .Except in one case.
$.ajaxPrefilter(function (options) {
if (!options.beforeSend) {
options.beforeSend = function (xhr) {
xhr.setRequestHeader('Token', '1234');
}
}
});
Suppose if we are putting beforesend in $.ajax request , the above prefilter is not firing (example below). Can you please tell me how can I acheive it by keeping both?. Is there any way can we add header to xmlHttpRequest so that we can use for all ajax requests that are going from application?
$("#AdvancedserchClick").on("click", function () {
$.ajax({
async: false,
cache: false,
type: "POST",
url: getUrlWithTabId("#Url.Action("AdvancedSearch", "AdvancedSearch")"),
beforeSend: function () {
Load.show();
},
success: function (result) {
$("#advancedsearch").modal('show');
$("#advancedsearch").html(result);
},
complete: function () {
Load.hide();
}
});
});
You can achieve this by using the below code
$.ajax({
url: 'foo/bar',
headers: { 'x-my-custom-header': 'some value' }
});
Or you can use pre-filter would be an easy way of accomplishing this but this way all requests will get the custom header, unless the specific request overrides the beforeSend option.
$.ajaxPrefilter(function( options ) {
if ( !options.beforeSend) {
options.beforeSend = function (xhr) {
xhr.setRequestHeader('CUSTOM-HEADER-KEY', 'CUSTOM-HEADER-VALUE');
}
}
});
Hope this helps.
$.ajaxPrefilter(function( options, originalOptions, xhr ) {
xhr.setRequestHeader('Token', '1234');
});
Docs say :
jQuery.ajaxPrefilter( [dataTypes ], handler )
Description: Handle custom Ajax options or modify existing options before
each request is sent and before they are processed by $.ajax()
I need to display the comments on my page by fetching from database.
I am able to get dummy test data from .json file but when I try to connect it with data base url it is not getting the data.
I am using js handlebar template to loop the data in html page.
Here is my js to fecth the data
var getData = function () {
console.group("getData()", "Fetching data from server at", R.settings.endPoints.incoming.getData);
var promise = $.ajax({
url: R.settings.endPoints.incoming.getData
});
console.log("getData()", "Returing the promise", { promise: promise });
console.groupEnd();
return promise;
};
DB url is set with .getdata like below
endPoints: {
incoming: {
getData: "http://localhost:8080/rest/review/getReview"
},
outgoing: {
sendData: "http://localhost:8080/rest/review/createReview"
}
}
jQuery's $.ajax function is asynchronous by default so you need to put your processing/display code into the deferred.done method like so:
var promise;
$.ajax({
url: R.settings.endPoints.incoming.getData
})
.done(function( msg ) {
console.log(msg);
promise = msg;
});
However, if you want to perform a synchronous request, do something like this:
var promise = $.ajax({
url: R.settings.endPoints.incoming.getData,
async: false
});
Note that according to the official documentation:
As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated;
you must use the success/error/complete callback options instead of the
corresponding methods of the jqXHR object such as jqXHR.done() or the
deprecated jqXHR.success().
If I have to leverage niceties of jQuery AJAX API and set my own custom settings for each ajax call my app makes like below:
Say I have a page which displays employee information within table by making ajax calls to some API.
define(["jQuery"], function($) {
var infoTable = function (options) {
function init() {
// Provide success callback
options.success_callback = "renderData";
getData();
}
function renderData() {
// This callback function won't be called as it is not
// in global scope and instead $.ajax will try to look
// for function named 'renderData' in global scope.
// How do I pass callbacks defined within requirejs define blocks?
}
function getData() {
$.ajax({
url: options.apiURL,
dataType: options.format,
data: {
format: options.format,
APIKey: options.APIKey,
source: options.source,
sourceData: options.sourceData,
count: options.count,
authMode: options.authMode
},
method: options.method,
jsonpCallback: options.jsonpCallback,
success: options.success_callback,
error: options.error_callback,
timeout: options.timeout
});
}
}
return {
init: init
}
}
How do I achieve this?
I know we can use JSONP request as require calls but that restricts me to using jsonp, making GET requests and all other features $.ajax offers.
This example would let you either use a default success callback, or provide an override, using:
success: options.successCallback || renderData
(The example uses jsfiddle rest URLs - this fact is unimportant, and stripped out the data object to keep the example short)
define("mymodule", ["jquery"], function($) {
function renderData() {
console.log("inside callback");
}
function getData(options) {
$.ajax({
url: options.apiURL,
dataType: options.format,
method: options.method,
jsonpCallback: options.jsonpCallback,
success: options.successCallback || renderData,
error: null,
timeout: options.timeout
});
}
return {
getData: getData
}
});
require(["mymodule"], function(m) {
console.log(m, m.getData({
apiURL: "/echo/json/"
}));
console.log(m, m.getData({
successCallback: function() { console.log("outside callback"); },
apiURL: "/echo/json/"
}));
});
Would print:
GET http://fiddle.jshell.net/echo/json/ 200 OK 263ms
Object { getData=getData()} undefined
GET http://fiddle.jshell.net/echo/json/ 200 OK 160ms
Object { getData=getData()} undefined
inside callback
outside callback
I'm trying to trigger an action after a Javascript object has been created via an AJAX call. My object looks something like this:
function API(uid,accessToken){
$.ajax("path/to/file", {
type: "POST",
data: { user: uid, auth: accessToken },
dataType: "json",
success: function(jsonData) {
arrayname = jsonData[values]
}
});
}
I tried to use JQuery's $.when function to do a callback after the object setup is complete (ie. the array is populated with the ajax response), which looked like this:
$.when( API = new API(uid, accessToken) ).then(function() {
...success function...
});
...but the $.when function triggers with the arrayname values still undefined. From the function's standpoint the deferred object is resolved even though the object values have not yet been set. I've since tried a number of ways to make the API object become deferred based on the completing of the entire ajax call and the setting of the variables, but I'm a bit stuck on the best way to do this.
Any pointers would be most appreciated! Thanks.
You could pass the callback function when you create the object, like so:
function API(uid,accessToken, callback){
$.ajax("path/to/file", {
type: "POST",
data: { user: uid, auth: accessToken },
dataType: "json",
success: function(jsonData) {
arrayname = jsonData[values]
callback(jsonData[values])
}
});
}
and then instantiate the object like so
var api = new API(uid, accessToken, function(array) {
// success function
});
If the problem is due to the "success" callback running after the "then" callbacks, you could try turning success callback into a then callback as well. I don't use JQuery but I guess it would look something like:
function API(uid,accessToken){
return $.ajax("path/to/file", {
type: "POST",
data: { user: uid, auth: accessToken },
dataType: "json",
}).then(function(jsondata){
arrayname = jsondata[values]
});
}
$.when( API = new API(uid, accessToken) ).then(function() {
// ...
});
The reason you use $.when is when you are correlating the callbacks of multiple promises, async tasks, etc. Since jQuery 1.5, all calls to $.ajax and all the wrappers ($.get and $.post) all return promises. Therefore you don't need to wrap this call with the $.when statement unless you want to do $.when(ajaxCall1, ajaxCall2).
Since you want to filter the result from the server, you should use the pipe method of promises:
function API(uid, accessToken)
return $.post(
type: 'POST'
,data: { user: uid, auth: accessToken }
,dataType: 'json'
)
.pipe(function(json) {
return json[values];
})
;
}
This allows you to write your code the way you desire:
API(uid, token)
.then(
// success state (same as promise.done)
function(arrayname /* named from your sample script*/) {
alert('success! ' + arrayname);
}
// error state (same as promise.fail)
,function(jqXHR, status, error) {
console.warn('oh noes!', error);
}
)
.done(function() { /* done #2 */ })
.fail(function() { /* fail #2 */ })
;
Note: promise.pipe() also allows you to filter (change the data passed to) the error callback as well.