Question: I am facing an issue with ES6 modules regarding calling functions between them as a callback.
In "page_API.js", the callback function is invoked upon receiving data.
// Initiating a server request, triggering the callback upon data reception
import {requestExecuteAsync} from "../xml_functions";
export const getData = () => {
requestExecuteAsync('api/getData', "dataRecieved");
};
export const dataRecieved = () => {
alert('Received Data');
};
Now in my "xml_functions.js" where I manage requestExecuteAsync and more operations, I intend to execute the dataRecieved function after obtaining a response from the server.
Prior to this, our codebase comprised numerous JS files where all functions were global, enabling the following implementation:
// Upon data retrieval from the server
if (callbackparamsArr.length) {
window[callback](res, callbackparamsArr);
} else {
window[callback](res);
}
However, the callback function is now undefined in the window as it lacks the scope of dataRecieved.
I attempted to include the dataRecieved function within xml_functions:
import { dataRecieved } from "../MyPage/MyPage_API.js";
and then simply call:
[callback](res)
Nevertheless, due to the "dataRecieved" import being assigned a different string within requestExecuteAsync (e.g. "_Data_Recieved_" instead of "dataRecieved"), I'm uncertain about how to proceed.
Any assistance on this matter would be greatly appreciated!
Thank you