为什么在提示列表选择完成之前我的其他方法运行？

Question

我目前正在为将由两个用户使用的网络应用程序进行概念验证。为此，我在终端中模拟了这个过程（非常非常基础）。

我想做的是演示两个用户的初始“链接”。我为具有多个属性的用户创建了 class。 setUserInfo() 方法应该运行一步一步，直到用户选择我的列表的首选项（我为此使用 prompt-list npm 包）然后应该推送这个选择进入数组 ownPref。之后方法 receivePartnerPrefs() 应该将 partnerExamplePrefs 的内容插入构造函数属性 partnerPrefs.

问题是，如果我运行这个脚本，一切都很好，直到 prompt-list 包的 list.ask() 方法完成它的工作。之后的每个方法（在本例中为 receivePartnerPrefs）运行会同时执行，并且会中断我要在此处展示的逐步过程。

const prompt = require("prompt-sync")();
var List = require("prompt-list");

let partnerExamplePrefs = [
  "Farbenfroh",
  "Eng geschnitten",
  "Schlicht und einfach",
];

let prefs = [];

class User {
  constructor(userName, ownPref = [], socPoints, shopPartner, partnerPrefs) {
    this.userName = userName;
    this.ownPref = ownPref;
    this.socPoints = socPoints;
    this.shopPartner = shopPartner;
    this.partnerPrefs = partnerPrefs;
  }

  setUserInfo() {
    this.userName = prompt("Hallo! Wie ist dein Name? ");
    console.log("Hallo " + this.userName);

    this.socPoints = 0;

    this.shopPartner = prompt(
      "Wen möchtest du als Shopping Begleitung wählen? "
    );
    console.log(this.shopPartner + " und du seid nun verlinkt!");

    var list = new List({
      name: "preferences",
      message:
        "Damit deine Shopping-Begleitungen für dich Produkte auswählen können, benötigt sie ein paar Informationen. Bitte wähle aus der folgenden Liste einen Punkt aus, der dir am Wichtigsten ist: ",
      choices: [
        "Farbenfroh",
        "Schwarz-weiß",
        "Eng geschnitten",
        "Weit geschnitten",
        "Schlicht und einfach",
        "Ausgefallenes",
      ],
    });

    list.ask(function (answer) {
      this.ownPref = prefs;
      this.ownPref.push(answer);
    });
  }

  receivePartnerPrefs() {
    // Receive partner preferences
    this.partnerPrefs = partnerExamplePrefs;

    console.log(
      "Die Vorlieben von " +
        this.shopPartner +
        " wurden übertragen. Sämtliche Produkte die du sehen wirst, basieren auf den Vorlieben deines Partners. Nun kannst du beginnen dich mit deiner Begleitung auseinanderzusetzen!"
    );
  }
}

let myUser = new User();
myUser.setUserInfo();
myUser.receivePartnerPrefs();

我的错误在哪里？谢谢！

Answer 1

正在查看 prompt-list 的自述文件：

// async
list.ask(function(answer) {
  console.log(answer);
});
 
// promise
list.run()
  .then(function(answer) {
    console.log(answer);
  });

ask 是一个异步函数。它会在应用程序的其他部分继续运行时完成它的工作运行。如果你想等到任务完成，你可以在回调函数中完成你想做的剩下的事情，或者使用其他方法（list.run()）并等待承诺被解决，然后再继续.

为此，您需要将 setUserInfo 方法设为 async 方法。 async 方法 return a Promise 设计使然，在方法执行完成时解决。在该方法中，您还需要 await on list.run().

然后，您还需要将代码的主要部分也放在 async 函数中，这样您就可以 await 在 setUserInfo() 方法上。

请注意，您也可以只调用该方法并使用 .then 符号仅在 promise 已解决后才做事，但 await 使事情更具可读性。

class User {
  constructor(...) {
    // ...
  }

  async setUserInfo() {
    // ...
    var list = new List({
      // ...
    });

    const answer = await list.run();

    this.ownPref = prefs;
    this.ownPref.push(answer);
  }

  receivePartnerPrefs() {
    // ...
  }
}

const main = async () => {
  let myUser = new User();
  await myUser.setUserInfo();
  myUser.receivePartnerPrefs();
};

main().catch(console.error);

为什么在提示列表选择完成之前我的其他方法运行？

Why do my other methods run before the prompt-list selection is done?

javascript

class

constructor

npm-package

为什么在提示列表选择完成之前我的其他方法 运行？

Why do my other methods run before the prompt-list selection is done?

javascript

class

constructor

npm-package

为什么在提示列表选择完成之前我的其他方法运行？