Question

我的用户遇到一个间歇性问题，但是我无法使它发生，所以我自己从未经历过。

我有一个带有两个html表单的vue.js组件。用户填写第一个表单，然后提交它……将调用一个函数，该函数执行两次axios调用，然后以编程方式提交第二个表单。第二种形式是标准的PayPal形式，可将用户发送到PayPal。请参见下面的代码段。

doLogging（）函数将写入另一台服务器上的文件。 doMail（）函数发送电子邮件，也写入另一个文件。

总是将用户发送到PayPal网站，并且永远不会发现任何问题。但是，有时日志记录和电子邮件都会发生，有时两者都不会发生。它始终是两者或都不是。好像axios调用有时发生，但其他情况没有发生。

以下是html片段：

<form @submit.prevent="processRegistration()">
  <button type="submit"
    class="button is-info">Ready to pay with PayPal
  </button>
  ... other form elements ...
</form>

<form id="paypalForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" class="hidden">
   ... paypal form elements ...
   <input type="submit" value="Pay with PayPal"/>
</form>

这是被精简的函数，称为：

 processRegistration() {
    this.doLogging();
    this.doMail();

    let paypalForm = document.getElementById('paypalForm');
    paypalForm.submit();
 }

async doLogging() {   // log info to a file
  let headers = {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};
  try {
    await axios.post('https://logging.xxx.com/logger.php', this.stuff, {headers: headers});
  } catch (e) {
    console.log(e);
  }
}, 


async doMail() {  / send email and log info to a file
    let headers = {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};
    try {
        await axios.post('/email.log.php', this.otherStuff, {headers: headers});
    } catch (e) {
        console.log(e);
    }
 },

Answer 1

在提交贝宝表单时，doLogging()和doMail()中的承诺可能无法解决。解决此问题的最明显方法是同时等待两个功能（并使processRegistration()异步）。

async processRegistration() {
    await this.doLogging();
    await this.doMail();

    let paypalForm = document.getElementById('paypalForm');
    paypalForm.submit();
 }

现在，doMail()将等待doLogging()，并且在解决paypalForm.submit()之前不会调用doMail()。另一种选择是使用链接。

这不是最漂亮的方法，但无论如何都要做好工作。

Answer 2

在阅读了有关Promises的更多内容之后，这是我对自己的问题的解决方案。由于doLogging（）和doMail（）帖子可以同时发生，因此使用Promise.all（）似乎可以确保在发给PayPal的帖子之前完成这些帖子。

doLogging() {
 let headers = {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};
 return axios.post('https://logging.xxx.com/logger.php', this.stuff, {headers: headers});
},

doMail() {
 let headers = {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};
 return axios.post('/email.php', this.otherStuff, {headers: headers});
},

submitToPayPal() {
 let paypalForm = document.getElementById('paypalForm');
 paypalForm.submit();
},

processMembership() {
 let log = this.doLogging();
 let mail = this.doMailToDancer();

 Promise.all([log, mail])
  .then(this.submitToPayPal())
  .catch(error => {
   console.log(error.message)
  });
},`

javascript提交表单可以干扰以前的axios调用吗

2 个答案: