调用另一个模块函数作为回调 [ES6]答案

【问题标题】：Calling another module function as callback [ES6]调用另一个模块函数作为回调 [ES6]
【发布时间】：2016-10-25 11:25:59
【问题描述】：

我有一个关于 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 中定义的不同字符串（例如，它将被称为“_Data_Recieved_”而不是“dataRecieved”，我不确定该怎么做。

任何帮助将不胜感激！

谢谢

【问题讨论】：

为什么不只传递函数本身而不是字符串？为什么不使用 Promises 而不是回调呢？
"以前我使用的代码库由许多 JS 文件组成，所有函数都位于全局命名空间中" - 哎哟。我很高兴 ES6 模块迫使您采用更好的方法:-)
@Bergi Aha 你在告诉我！有机会在一个新项目上开始将我们的一些遗留 XML 解析 + 网络代码重新编写到模块中，好多了！
@JaredSmith 我会考虑使用 Promise 感谢您的回答，只是尝试使用旧代码库以模块化方式使其全部工作 :)

标签： javascript webpack es6-modules

【解决方案1】：

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

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，您可能需要查看 Promise，这样您根本不需要传递回调函数。

【讨论】：

太棒了，这就是我所追求的，非常感谢！