如何在纯JS中加载多个本地文件

Question

我正在尝试将多个xml文件加载到变量中。 理想情况下，我希望列出包含未知数量文件的内容。 像这样的files = [file1.content, file2.content...]如果可能的话，我想保留纯JavaScript，但是在互联网上搜索似乎非常困难。 它是xml文件的预览器，将在本地运行，最有可能在现代浏览器中运行

const xmlFiles = ['font.ufo/glyphs/A_.glif', 'font.ufo/glyphs/B.glif']
let xmlData = []

const load = new Promise(function(printData) {
  for (i in xmlFiles) {
    const request = new XMLHttpRequest()
    request.open("GET",xmlFiles[i])
    request.onload=function(){
        xmlData.push(request.responseText)
    }
  request.send()
  }
  printData()
})

load.then(function(){
  console.log(xmlData, xmlData.length)
  console.log('This is printData function')
})

现在，我只收到空白清单。 虽然当我打开控制台时，我看到了内容。 当我在then函数中要求列表的长度时，它表示为零。 我不知道我是否选择了正确的方法，我非常希望如此。 谢谢！

Answer 1

Promise.all允许通过承诺的阵列，并且当所有都解决然后内部then与解析值的数组传递。

在下面， load功能不会运行循环，而是将文件作为参数传递。 然后，每个文件被加载并解决， xmlData -现在一个局部变量then处理程序，应该有你期待什么。

对于Promise.all参数，我们将每个xmlFiles映射到具有load函数的promise。 （这甚至可能是Promise.all(xmlFiles.map(load))但我保留了更多详细信息。）

const xmlFiles = ['font.ufo/glyphs/A_.glif', 'font.ufo/glyphs/B.glif']

const load = (file) => new Promise((resolve) => {
  const request = new XMLHttpRequest()
  request.open("GET", file)
  request.onload = function() {
    resolve(request.responseText);
  }
  request.send();
})

Promise
  .all(xmlFiles.map((file) => load(file)))
  .then(function(xmlData){
    console.log(xmlData, xmlData.length)
    console.log('This is printData function')
  })

我在没有测试的情况下写了这篇文章，但这至少应该给您一个想法。