How to wait for button click in Promise chain to pause execution?

Question

I'm trying to chain some backend calls to process files, but the whole workflow requires the user to provide some input halfway through. I'm not sure how to pause execution until the user clicks a button "Continue" so that it can continue working.

So the process is as follows:

1. The user selects a file and triggers an event to upload some data.
2. I get the response from the previous call, opening a modal with a form. I need to pause here.
3. Fill out the form and click the Continue button to continue the promise chain.
4. Trigger another call to submit more information to another endpoint.

So each of these steps involves an HTTP request, using axios, but I'm having trouble understanding how to chain these promises.

Now I have code similar to:

onFileSelected(event) {
  // code here
  axios
    .post("")
    .then((res) => {
      //Here I need to open the modal box and wait for the button to be clicked
    })
    .then(() => {
      anotherMethod();
    });
}

Answer 1

Promise itself does not provide a method to pause execution, but you can use async/await syntax to achieve this. Create a custom Promise that resolves when the user clicks the "Continue" button. like this:

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