将另一个模块调用为回调函数[ES6](Calling another module function as callback [ES6])

将另一个模块调用为回调函数[ES6](Calling another module function as callback [ES6])

我有一个关于ES6模块的问题以及如何正确地调用它们之间的函数作为回调。

取“page_API.js”，收到数据后，调用回调函数

// Make a call to our server, Once we've recieved data we'll call our callback import {requestExecuteAsync} from "../xml_functions"; export const getData = () => { requestExecuteAsync('api/getData', "dataRecieved"); }; export const dataRecieved = () => { alert('Recieved Data'); };

现在在我处理此requestExecuteAsync等的“xml_functions.js”中，我想在服务器响应后调用dataRecieved。

以前我使用的代码库由许多JS文件组成，所有函数都存在于全局命名空间中，所以函数就像这样工作

// once data has been retrieved from server if (callbackparamsArr.length) { window[callback](res, callbackparamsArr); } else { window[callback](res); }

但是现在回调函数在窗口中未定义，因为它不再具有dataRecieved范围。

我已经尝试在xml_functions中包含dataRecieved函数

import { dataRecieved } from "../MyPage/MyPage_API.js";

然后打电话

[callback](res)

但是由于“dataRecieved”导入获得了requestExecuteAsync中定义的不同字符串（EG将被称为“_Data_Recieved_”而不是“dataRecieved”，我不知道该怎么做。

任何帮助将非常感激！

谢谢

I have a question regarding ES6 modules and how to correctly call functions between them as a callback.

Take "page_API.js", Upon data being recieved the callback function is called

// Make a call to our server, Once we've recieved data we'll call our callback import {requestExecuteAsync} from "../xml_functions"; export const getData = () => { requestExecuteAsync('api/getData', "dataRecieved"); }; export const dataRecieved = () => { alert('Recieved Data'); };

Now in my "xml_functions.js" where I handle this requestExecuteAsync and more, I would like to call the dataRecieved once the server has responded.

Previously the codebase I work with consisted of many JS files, with all functions living in the global namespace, so the function worked like this

// once data has been retrieved from server if (callbackparamsArr.length) { window[callback](res, callbackparamsArr); } else { window[callback](res); }

However now the callback function is undefined in the window as it no longer has scope of dataRecieved.

I've tried including the dataRecieved function inside the xml_functions

import { dataRecieved } from "../MyPage/MyPage_API.js";

and then just call

[callback](res)

but due to the "dataRecieved" import getting given a different string as defined in requestExecuteAsync (E.G it will be called "_Data_Recieved_" instead of "dataRecieved" i'm not sure what to do.

Any help would be much appreciated!

Thanks

最满意答案

您不应传递要调用的回调函数的名称。 只需传递函数本身：

import {requestExecuteAsync} from "../xml_functions"; export function getData() { requestExecuteAsync('api/getData', dataReceived); // ^^^^^^^^^^^^ } export function dataReceived() { alert('Recieved Data'); }

export function requestExecuteAsync(path, callback) { … if (typeof callback == "function") callback(res); … }

但是，由于您使用的是ES6，因此您可能需要查看promises，以便根本不需要传递回调函数。

You should not pass the name of the callback function you want to call. Just pass the function itself:

import {requestExecuteAsync} from "../xml_functions"; export function getData() { requestExecuteAsync('api/getData', dataReceived); // ^^^^^^^^^^^^ } export function dataReceived() { alert('Recieved Data'); }

export function requestExecuteAsync(path, callback) { … if (typeof callback == "function") callback(res); … }

But since you're using ES6, you might want to have a look at promises so that you don't need to pass callback functions around at all.