Javascript - 异步答案

【问题标题】：Javascript - AsyncJavascript - 异步
【发布时间】：2017-03-15 00:11:19
【问题描述】：

我正在开发一个在 d3 中创建可视化的项目。我有一个数组，其中包含要按顺序加载的文件名。

但是，当遍历数组并调用各自的方法时，数组中的第二个元素甚至在第一个元素完成加载之前就被调用了。

        for(j=0;j<chosenAirports.length;j++)
        {
            var fileName = chosenAirports[j];
            var splitData = fileName.split("_");                
            readFile(splitData[0],selectedYear,splitData[0] + "_" +  selectedYear);
         }

readFile 是我试图为每个数组元素调用的函数。但在一个元素的 readFile 完成之前，循环中的下一个元素会被调用。

我相信这是由于 javascript 的异步特性。谁能建议我可以避免这种情况的方法。

感谢任何帮助。

【问题讨论】：

既然你用readFile()这个名字搞砸了我们所有人的脑袋，我们能看看你的readFile()到底做了什么吗？如果函数是一个黑盒，没有输入、输出或内部功能的详细信息，我们无法做出任何假设或提供帮助。

标签： javascript node.js d3.js

【解决方案1】：

鉴于您正在读取一个文件，我猜这是在 Node 上运行的？

如果是这样，那么 readFile 函数要么调用 Node 的 readFile 函数，要么是 Node 的 readFile 函数。

正如您所说，这是一个异步函数。有一个名为 readFileSync 的同步版本可以防止您遇到的问题。

【讨论】：

【解决方案2】：

如果您只是想让代码正常工作，使用同步 readFileSync() 方法将解决您的问题（详情请点击此处：https://code-maven.com/reading-a-file-with-nodejs）。

如果您对确保异步函数返回但仍异步运行感兴趣，您可能对使用 RxJS Promises 感兴趣。

【讨论】：

恐怕我把你们都带错了方向。 readFile 不代表从文件中读取。它只是执行某些特定任务（与文件无关）的函数的名称。很抱歉没有提供完整的信息。

【解决方案3】：

如果你想保持异步 - 我建议你这样做，因为不需要对抗 Node/Javascript 的核心 - 你可以将文件的处理包装在 Promise 中：创建一个接收文件的函数name 作为参数，并返回一个带有处理结果的 Promise。

类似：

function processFile(fileName) {
  return new Promise((resolve,reject) => {
    fs.readFile(fileName, function(err, data){
      if (err) {
        return reject(err);
      };
      return resolve(processData(data));
    });
  });
}

显然，您需要提供您的 processData() 函数并确保它返回用于处理给定文件的数据。

然后，要按顺序链接所有文件的处理，您可以在数组上使用reduce 方法，如：

const promise = chosenAirports.reduce((promise, fileName) => {
  return promise.then((previousResult) => {
    return processFile(fileName);
  })
}, Promise.resolve());

然后你查询这个promise的结果，得到最终的结果。

promise
.then((result) => {
  console.log('Result: ', result);
})
.catch((err) => {
  console.log(err);
});

用于处理数据并实施一种机制来收集所有结果，但使用该解决方案并不困难。

【讨论】：