POST 只有在用户确认警报后才会触发请求

Question

我有一个带有提交按钮的 Vue.js 表单。单击时，将发送 POST axios 请求，如果调用有效，则会触发视觉警报。

一切正常，但有一个小细节。 POST 请求在用户从警报弹出窗口中单击 "OK" 后才会发送。这不是预期的行为。只要是有效调用就应该发送请求，弹出窗口只是视觉确认。

您知道警报触发请求的原因吗？谢谢！

submitForm(formName) {
  this.$refs[formName].validate(valid => {
    if (valid) {
      axios.post(
        "https://dummy.com",
        { name: this.ruleForm },
        {
          headers: {
            "Content-type": "application/json"
          }
        }
      );
      alert(
        "Success!"
      );
    } else {
      alert("Error at submit. Check required fields.");
      console.log("Error at submit. Check required fields.");
      return false;
    }
  });
},

额外问题：您知道在用户确认警报后触发重定向的简单方法吗？ :D

Answer 1

axios.post 是异步的。您可能应该在结果 returns:

时调用成功警报

 axios.post(
    "https://dummy.com",
    { name: this.ruleForm },
    {
      headers: {
        "Content-type": "application/json"
      }
    }
  ).then(res => {
     alert(
      "Success!"
     );
  }).catch(err => console.error(err)) // handle error here

此外，警告会阻止进一步执行，直到用户单击确定（同步）。

Answer 2

submitForm(formName) {
  this.$refs[formName].validate(valid => {
    if (valid) {
      axios.post(
        "https://dummy.com",
        { name: this.ruleForm },
        {
          headers: {
            "Content-type": "application/json"
          }
        }
      ).then(function(res){
          alert(
               "Success!"
                       );
              //write your code - response code is 200
    }).catch(function(err){
               alert(
                  "Error!"
                      );
               //write your code - response code != 200
     });

    } else {
      alert("Error at submit. Check required fields.");
      console.log("Error at submit. Check required fields.");
      return false;
    }
  });
},

POST 只有在用户确认警报后才会触发请求

POST request gets triggered only after user confirms alert

javascript

forms

alert

axios

vuejs2