如何在Promise链中等待按钮点击来暂停执行?
P粉170438285
P粉170438285 2023-08-15 13:06:43
[Vue.js讨论组]

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

所以流程如下:

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

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

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

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


P粉170438285
P粉170438285

全部回复(1)
P粉277824378

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() 
  })
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号