Inquirer调用prompt后不等待用户输入问题的排查与修复

问题原因 #

• 异步代码执行顺序错误：inquirer.prompt()是异步操作，会被放入Node.js的事件队列等待执行，而你写在它后面的二维码生成、文件写入代码是同步执行的，这些代码会在用户完成输入之前就运行，导致程序看起来没等待输入就跳转。
• 变量未正确赋值：link变量初始值为undefined，且你没有在用户输入完成后将值赋给它，后续代码直接使用这个未定义的变量，不仅逻辑错误，还会导致程序提前执行后续操作。

解决方法 #

将所有依赖用户输入的逻辑（处理输入内容、生成二维码、写入文件）全部放入inquirer.prompt()的.then()回调函数中，确保这些代码只在用户完成输入后才执行。同时，ES模块的import语句必须放在文件顶部，不能穿插在代码中间。

修正后的代码：

import inquirer from 'inquirer';
import qr from 'qr-image';
import fs from 'fs';

inquirer
  .prompt([
    { message: "add link", name: "URL" }
  ])
  .then((answers) => {
    const link = answers.URL;
    console.log(link);
    // 生成二维码并输出到文件
    var qr_svg = qr.image(link, { type: 'svg' });
    qr_svg.pipe(fs.createWriteStream('qr_code.svg'));
    // 写入用户输入到文件
    fs.writeFile('user_input.txt', link, (err) => {
      if (err) throw err;
      console.log('用户输入已保存到user_input.txt');
    });
  })
  .catch((error) => {
    if (error.isTtyError) {
      console.log('当前环境无法渲染输入提示');
    } else {
      console.log('程序出错:', error);
    }
  });

可选写法（async/await风格） #

如果习惯更直观的同步式写法，可以用async/await重构代码：

import inquirer from 'inquirer';
import qr from 'qr-image';
import fs from 'fs';

async function main() {
  try {
    const answers = await inquirer.prompt([
      { message: "add link", name: "URL" }
    ]);
    const link = answers.URL;
    console.log(link);
    var qr_svg = qr.image(link, { type: 'svg' });
    qr_svg.pipe(fs.createWriteStream('qr_code.svg'));
    fs.writeFile('user_input.txt', link, (err) => {
      if (err) throw err;
      console.log('用户输入已保存');
    });
  } catch (error) {
    if (error.isTtyError) {
      console.log('当前环境无法渲染输入提示');
    } else {
      console.log('程序出错:', error);
    }
  }
}

main();

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