Может ли отправка формы javascript мешать предыдущим вызовам axios

Question

У меня периодически возникают проблемы, с которыми сталкиваются мои пользователи, но я не могу заставить это произойти, поэтому я никогда не испытывал это сам.

У меня есть компонент vue.js с двумя HTML-формами.Пользователь заполняет первую форму, отправляет ее ... вызывается функция, которая выполняет два вызова 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 () могут происходить одновременно, использование 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)
  });
},`

Answer 2

Обещание в doLogging() и doMail(), вероятно, не будет выполнено к моменту отправки формы PayPal.Самый очевидный способ решить эту проблему - дождаться обе функции (и сделать processRegistration() async).

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

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

Теперь doMail() будет ждать doLogging(), и paypalForm.submit() не будет вызыватьсядо разрешения doMail().Другой вариант - использовать цепочку.

Это не самый красивый подход, но в любом случае он выполняет свою работу.