Bagaimana untuk menunggu klik butang dalam rantai Janji untuk menjeda pelaksanaan?

Question

Saya cuba merantai beberapa panggilan bahagian belakang untuk memproses fail, tetapi keseluruhan aliran kerja memerlukan pengguna untuk memberikan beberapa input separuh jalan. Saya tidak pasti cara untuk menjeda pelaksanaan sehingga pengguna mengklik butang "Teruskan" supaya ia boleh terus berfungsi.

Jadi prosesnya adalah seperti berikut:

1. Pengguna memilih fail dan mencetuskan acara untuk memuat naik beberapa data.
2. Saya mendapat respons daripada panggilan sebelumnya, membuka modal dengan borang. Saya perlu berhenti sebentar di sini.
3. Isi borang dan klik butang Teruskan
4. Cetuskan panggilan lain untuk menyerahkan maklumat lanjut ke titik akhir yang lain.

Jadi, setiap langkah ini melibatkan permintaan HTTP, menggunakan axios, tetapi saya menghadapi masalah memahami cara merantai janji ini.

Sekarang saya mempunyai kod yang serupa dengan:

onFileSelected(event) {
  // kod di sini
  aksios
    .post("")
    .then((res) => {
      //Di sini saya perlu membuka kotak modal dan menunggu butang diklik
    })
    .then(() => {
      anotherMethod();
    });
}

Answer 1

Promise sendiri tidak menyediakan kaedah untuk menjeda pelaksanaan, tetapi anda boleh menggunakan sintaks async/menunggu untuk mencapai ini. Buat Janji tersuai yang diselesaikan apabila pengguna mengklik butang "Teruskan". Seperti ini:

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