Comment attendre le clic sur le bouton dans la chaîne de promesses pour suspendre l'exécution ?

Question

J'essaie d'enchaîner certains appels backend pour traiter les fichiers, mais l'ensemble du flux de travail nécessite que l'utilisateur fournisse des informations à mi-parcours. Je ne sais pas comment suspendre l'exécution jusqu'à ce que l'utilisateur clique sur un bouton "Continuer" afin qu'il puisse continuer à travailler.

Le processus est donc le suivant :

1. L'utilisateur sélectionne un fichier et déclenche un événement pour télécharger des données. ≪/li>
2. Je reçois la réponse de l'appel précédent, en ouvrant un modal avec un formulaire. Je dois faire une pause ici. ≪/li>
3. Remplissez le formulaire et cliquez sur le bouton Continuer ≪/li>
4. Déclenchez un autre appel pour soumettre plus d’informations à un autre point de terminaison. ≪/li>

Chacune de ces étapes implique donc une requête HTTP, utilisant axios, mais j'ai du mal à comprendre comment enchaîner ces promesses.

Maintenant, j'ai un code similaire à :

onFileSelected(event) {
  // code ici
  axios
    .poste("")
    .then((res) => {
      //Ici, je dois ouvrir la boîte modale et attendre que l'on clique sur le bouton
    })
    .then(() => {
      une autreMéthode();
    });
}
≪/pré>

Answer 1

Promise elle-même ne fournit pas de méthode pour suspendre l'exécution, mais vous pouvez utiliser la syntaxe async/wait pour y parvenir. Créez une promesse personnalisée qui se résout lorsque l'utilisateur clique sur le bouton « Continuer ». Comme ça :

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