How do I determine the name of the caller function in an AJAX or XMLHttpRequest call?
I am trying to figure out how to identify the name of the function that initiated the Ajax call programmatically using JavaScript or jQuery against an existing code base.
I am working on tools of an existing large code base and therefore am trying to identify a function name that correlates with AJAX requests. So there is already a lot of code out there and changing each method is apparently not the best approach. So, I'm trying to think of a generic approach that can work for all methods. The code already has a common wrapper around the AJAX call, so I can hook up to the method entry and exit points.
For example, in the below code, in a function always
, I need to know the name of the initiator function or the call stack.
function ajaxWrapper(){
var jqxhr = $.ajax( "https://jsonplaceholder.typicode.com/posts/1" )
.done(function() {
console.log( "success" );
})
.fail(function() {
console.log( "error" );
})
.always(function() {
console.log( "complete" );
// TODO: Who Initiated the call ?
});
}
function initiator1(){
initiator2();
}
function initiator2(){
ajaxWrapper();
}
initiator1();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
What have I tried?
-
I know one approach is to use custom headers in the method
beforeSend
, and always the callback receives an objectjqXHR
as a parameter. But this doesn't seem like a suitable approach as I cannot change all the functions to send the method name as a parameter. -
arguments.callee.caller
but it doesn't work for asynchronous methods. Also, this feature seems to be deprecated due to performance and security reasons.
Note. I am not looking for this information for debugging purposes. I already know about the Async call stack, initiators and console.trace solutions available in the developer tool.
source to share
One option is to create a call stack inside your shell, since before that you are in the call chain of the sync function.
var err = new Error();
var stack = err.stack;
And use it later in the callback because it is available as part of the higher scope. (Scopes don't care about async.)
You will need to parse (unfortunately browser) on this call stack. I don't know what you intend to do with the initiator, but you can save the entire chain, not just the first one.
Also note that this method is not reliable and you shouldn't use it for anything critical.
function ajaxWrapper(){
var err = new Error();
var stack = err.stack;
var jqxhr = $.ajax( "https://jsonplaceholder.typicode.com/posts/1" )
.done(function() {
console.log( "success" );
})
.fail(function() {
console.log( "error" );
})
.always(function() {
console.log( "complete" );
// TODO: Who Initiated the call ?
console.log(stack);
});
}
function initiator1(){
initiator2();
}
function initiator2(){
ajaxWrapper();
}
initiator1();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
source to share