Wie kann ich auf einen Button-Klick in der Promise-Kette warten, um die Ausführung anzuhalten?

Question

Ich versuche, einige Back-End-Aufrufe zu verketten, um Dateien zu verarbeiten, aber der gesamte Workflow erfordert, dass der Benutzer nach der Hälfte des Vorgangs Eingaben macht. Ich bin mir nicht sicher, wie ich die Ausführung anhalten soll, bis der Benutzer auf die Schaltfläche „Weiter“ klickt, damit die Ausführung fortgesetzt werden kann.

Der Prozess ist also wie folgt:

1. Der Benutzer wählt eine Datei aus und löst ein Ereignis zum Hochladen einiger Daten aus.
2. Ich erhalte die Antwort vom vorherigen Aufruf und öffne ein Modal mit einem Formular. Ich muss hier eine Pause machen.
3. Füllen Sie das Formular aus und klicken Sie auf die Schaltfläche Weiter, um die Versprechenskette fortzusetzen.
4. Lösen Sie einen weiteren Aufruf aus, um weitere Informationen an einen anderen Endpunkt zu übermitteln.

Jeder dieser Schritte beinhaltet also eine HTTP-Anfrage unter Verwendung von axios, aber ich habe Probleme zu verstehen, wie diese Versprechen verkettet werden sollen.

Jetzt habe ich einen ähnlichen Code wie:

onFileSelected(event) {
  // Code hier
  Axios
    .Post("")
    .then((res) => {
      //Hier muss ich das modale Feld öffnen und darauf warten, dass auf die Schaltfläche geklickt wird
    })
    .then(() => {
      eine andere Methode();
    });
}

Answer 1

Promise本身并没有提供暂停执行的方法，但你可以使用async/await语法来实现。创建一个自定义的Promise，在用户点击"Continue"按钮时解析。就像这样：

async function onFileSelected(event) {
  try {
    const response = await axios.post("") // 上传数据
    await showModalAndWaitForUserInteraction() // 暂停并等待用户输入

    await anotherMethod() // 用户交互后继续执行

    // 继续执行剩余的Promise链
    const anotherResponse = await axios.post("") // 提交更多信息到另一个终点
    // ...
  } catch (error) {
    // 在这里处理错误
  }
}

function showModalAndWaitForUserInteraction() {
  return new Promise((resolve) => {
    // 显示带有按钮的模态框
    // ...模态框逻辑
    // 然后 resolve() 
  })
}