如何在Promise链中等待按钮点击来暂停执行？

Question

我正在尝试链接一些后端调用来处理文件，但整个工作流程需要用户在中途提供一些输入。我不确定如何暂停执行，直到用户点击一个按钮“继续”后才能继续工作。

所以流程如下：

1. 用户选择一个文件，触发上传一些数据的事件。
2. 我从上一个调用中获取响应，打开一个带有表单的模态框。我需要在这里暂停。
3. 填写表单，点击“继续”按钮以继续 promise 链。
4. 触发另一个调用，将更多信息提交到另一个端点。

所以这些步骤中的每一步都涉及到一个 HTTP 请求，使用 axios，但我很难理解如何链接这些 promises。

现在我有类似以下的代码：

onFileSelected(event) {
  // 这里的代码
  axios
    .post("")
    .then((res) => {
      // 在这里我需要打开模态框，并等待按钮点击
    })
    .then(() => {
      anotherMethod();
    });
}

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() 
  })
}