如何在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() 
  })
}