如何在循环中处理NightmareJS异步操作并等待全部任务完成？

问题背景 #

你当前的Gulp任务尝试用Nightmare遍历多个URL提取SVG，但循环中的异步操作没正确等待，导致任务可能提前结束或者部分处理不完整。先把你的代码补全并明确问题点：

gulp.task('export', done => { 
  const path = require('path'); 
  const Nightmare = require('nightmare'); 
  const nightmare = new Nightmare(); 
  const urls = ['http://one.com', 'http://two.org', 'http://three.net']; 
  async function exportPDFs (items) { 
    for (url of items) { 
      const filename = path.parse(url).name; 
      const selector = 'svg'; 
      await nightmare 
        .goto(url) 
        .wait(selector) 
        .evaluate(selector => {
          // 提取SVG的逻辑，比如返回元素的HTML
          return document.querySelector(selector)?.outerHTML;
        }, selector)
        .then(svgContent => {
          // 处理并输出SVG的逻辑
          console.log(`处理${filename}完成`);
        });
    }
  }
  exportPDFs(urls);
  done(); // 这里会提前触发任务完成，导致异步操作未执行完
});

核心问题 #

你的代码里有两个关键问题：

1. 调用exportPDFs(urls)后立刻执行done()，Gulp会认为任务已经完成，但Nightmare的异步操作还在后台运行；
2. 循环中没有处理错误，且没有确保所有URL处理完后关闭Nightmare实例。

解决方案 #

1. 正确等待异步流程并通知Gulp任务完成 #

要确保所有异步操作执行完毕后再让Gulp结束任务，需要等待async函数执行完成后再调用done，同时处理可能的错误：

gulp.task('export', done => { 
  const path = require('path'); 
  const Nightmare = require('nightmare'); 
  const fs = require('fs');
  const nightmare = new Nightmare(); 
  const urls = ['http://one.com', 'http://two.org', 'http://three.net']; 

  async function exportSVGs(items) { 
    // 用const声明url，避免循环变量提升导致的异步问题
    for (const url of items) { 
      const filename = path.parse(url).name; 
      const selector = 'svg'; 
      
      try {
        // 等待当前URL的所有操作完成
        const svgContent = await nightmare 
          .goto(url) 
          .wait(selector) 
          .evaluate(selector => {
            const svgElement = document.querySelector(selector);
            if (!svgElement) throw new Error(`页面${window.location.href}中未找到SVG元素`);
            return svgElement.outerHTML;
          }, selector);
        
        // 示例：将SVG写入到dist目录
        const outputDir = path.join(__dirname, 'dist');
        // 确保输出目录存在
        if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });
        const outputPath = path.join(outputDir, `${filename}.svg`);
        fs.writeFileSync(outputPath, svgContent);
        console.log(`✅ 成功导出：${outputPath}`);
      } catch (err) {
        console.error(`❌ 处理${url}失败：`, err.message);
        // 可选：如果想单个错误不中断整个任务，就继续循环；否则抛出错误终止
        // throw err;
      }
    }

    // 所有任务完成后必须关闭Nightmare实例，释放资源
    await nightmare.end();
  }

  // 等待exportSVGs执行完毕，再通知Gulp任务状态
  exportSVGs(urls)
    .then(() => done()) // 所有操作完成，任务成功
    .catch(err => done(err)); // 发生未捕获的错误，任务失败
});

2. Gulp 4的优化写法（推荐） #

如果你的项目用的是Gulp 4，可以直接返回Promise，不用done回调，代码更简洁：

gulp.task('export', async () => { 
  const path = require('path'); 
  const Nightmare = require('nightmare'); 
  const fs = require('fs');
  const nightmare = new Nightmare(); 
  const urls = ['http://one.com', 'http://two.org', 'http://three.net']; 

  try {
    for (const url of urls) {
      const filename = path.parse(url).name; 
      const selector = 'svg'; 
      
      const svgContent = await nightmare 
        .goto(url) 
        .wait(selector) 
        .evaluate(selector => {
          const svgElement = document.querySelector(selector);
          if (!svgElement) throw new Error(`未找到选择器${selector}对应的元素`);
          return svgElement.outerHTML;
        }, selector);

      const outputPath = path.join(__dirname, 'dist', `${filename}.svg`);
      fs.writeFileSync(outputPath, svgContent);
      console.log(`导出成功：${outputPath}`);
    }
  } catch (err) {
    console.error('任务执行出错：', err);
    throw err; // 抛出错误让Gulp标记任务失败
  } finally {
    // 无论成功还是失败，都关闭Nightmare实例
    await nightmare.end();
  }
});

关键注意事项 #

• 循环变量用const：避免JavaScript循环变量提升导致的异步绑定问题，确保每个迭代的url是独立的；
• 必须关闭Nightmare实例：所有操作完成后调用nightmare.end()，防止浏览器进程残留导致资源泄漏；
• 错误处理：用try/catch包裹每个URL的处理，避免单个URL出错导致整个任务崩溃；
• 不要提前调用done：Gulp任务的完成回调必须在所有异步操作结束后触发，否则会导致任务提前终止。

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