如何等待异步函数？基于fetch API多文件同步下载问题排查

我来帮你搞定这个问题！你遇到的TypeError: res[0] is undefined，核心原因是你的get_files函数没有正确处理异步操作的等待，也没有返回有效的结果。fetch是异步API，直接同步调用函数根本等不到文件下载完成，自然拿不到结果。

原代码的问题分析 #

• get_files函数没有返回任何值，所以let res = get_files(files)得到的是undefined，访问res[0]肯定报错
• 你用了map遍历文件，但没有收集每个fetch的Promise，也没有用Promise.all来等待所有异步任务完成
• 没有处理XML响应的解析，直接想调用getElementsByTagName是行不通的，因为fetch返回的是Response对象，不是XML DOM

修正后的完整代码 #

下面是可以正常工作的实现，用async/await和Promise.all来处理多文件异步下载：

const files = ["file1.xml", "file2.xml", "file3.xml"];

// 用异步立即执行函数来调用，避免顶层await的兼容性问题
(async () => {
  try {
    const res = await get_files(files);
    // 现在res是解析后的XML文档数组，可以正常访问DOM节点
    console.log("res: " + res[0].getElementsByTagName("NAME")[0].childNodes[0].nodeValue);
  } catch (error) {
    // 捕获任何下载或解析错误
    console.error("处理文件时出错:", error);
  }
})();

async function get_files(files) {
  // 为每个文件生成一个异步请求的Promise
  const fetchPromises = files.map(async (fileUrl) => {
    // 发起fetch请求
    const response = await fetch(fileUrl);
    
    // 检查HTTP响应是否成功
    if (!response.ok) {
      throw new Error(`下载文件失败 ${fileUrl}: ${response.statusText}`);
    }
    
    // 把响应文本解析成XML DOM对象
    const xmlContent = await response.text();
    const parser = new DOMParser();
    return parser.parseFromString(xmlContent, "application/xml");
  });

  // 等待所有Promise完成，返回所有解析后的XML文档数组
  return Promise.all(fetchPromises);
}

关键知识点说明 #

• Promise.all：它会接收一个Promise数组，等待所有Promise都成功resolve后，返回一个包含所有结果的数组；如果有任何一个Promise失败（reject），它会立即抛出错误。
• async/await：让异步代码的写法更接近同步代码，避免嵌套回调，同时让错误处理更直观（用try/catch）。
• XML解析：用DOMParser把响应文本转换成XML DOM对象，这样你才能调用getElementsByTagName这类DOM方法。注意不要用response.xml()，它不是标准API，兼容性很差。
• 错误处理：一定要处理fetch的HTTP错误（比如404、500），不然这些错误不会自动抛出，会导致静默失败。

内容的提问来源于stack exchange，提问作者algolejos