理解vue和axios的流HTML表单数据处理时遇到问题

Question

我是Vue和Axios的新手，正在Salesforce Marketing Cloud-Cloud页面中尝试使用它。基本上有三个部分，

1. HTML+vue页面：这是一个表单页面，要求用户输入自动化名称并单击发送按钮
2. App.js:这是使用axios和Vue构建的
3. Form-hander.js(后端(：运行自动化的SSJS代码

我参考了此文档来构建此设置-https://ampscript.xyz/how-tos/how-to-start-status-of-automation-from-marketingcloud-form/.我理解Form-hander.js(ssjs(代码，这是可以跳过的。

我不能理解的是App.js的流程，有人能解释一下这里发生了什么吗。据我所知，点击发送按钮，就会调用App.js-validateForm中的函数。在这里之后我不理解代码的流程。表单处理程序代码是从App.js调用的吗？或者HTML页面中使用的post方法直接称为表单处理程序页面并启动自动化？

这是app.js的代码。如果有人能简单地向我解释一下这些代码的流程，那将非常有帮助。

new Vue({
el: '#app',
data: {
status: 100,
form: {
name: 'My Test Automation',
context: 'perform'
},
endpoint: '',
message: ''
},
watch: {
status: function () {
if(this.status == 201 || this.status == 102) {
this.form.context = 'check';
} else {
this.form.context = 'perform';
}
}
},
mounted: function() {
this.endpoint = this.$refs.form.getAttribute('action');
},
methods: {
sendFormData: function() {
this.status = 101;
var $this = this;
axios({
method: 'POST',
url: $this.endpoint,
data: $this.form,
validateStatus: function() { return true }
}).then(function(result) {
$this.status = result.data.Status;
$this.message = result.data.Message;
$this.checkStatus();
}).catch(function(error) {
console.error(error);
});
},
checkStatus: function() {
var $this = this;
var intervalID = setInterval(function() {
axios({
method: 'POST',
url: $this.endpoint,
data: $this.form,
validateStatus: function() { return true }
}).then(function(result) {
$this.status = result.data.Status;
$this.message = result.data.Message;
if($this.status == 200 || $this.status == 500) {
clearInterval(intervalID);
}
}).catch(function(error) {
console.error(error);
});
}, 10000); 
},
validateForm: function() {
if (this.$refs.form.checkValidity() !== false) {
this.sendFormData();
}
this.$refs.form.classList.add('was-validated');
}
}
})

Answer 1

让我向您解释一下您发布的代码流:

• 组件安装后，第一个被调用的方法是mounted()。在这种方法中，您将获取绑定到formhtml元素中action属性的endopint，并通过this.endpoint将其绑定到数据变量中
• 现在，单击submit按钮调用validateForm()方法来验证输入字段。如果验证通过，则调用sendFormData()方法以进行POSTAPI调用
• 获得响应后，您在status上添加了一个观察程序，以根据从API响应接收到的状态代码更新form.context值
• 最后，您将在axios调用成功时调用checkStatus()方法，在该checkStatus()方法中，您将再次在每个10 seconds和step 3之后进行POST API调用

Answer 2

1. 组件安装后，在(submit？(上运行表单绑定操作

2. 该操作可能绑定到sendFormData函数(在方法中(

3. 在sendFormData中，有axios请求的设置，然后是一个处理请求响应的回调

4. checkStatus函数在"；那么"；块

5. 如果以前的响应除了200或500之外，没有其他状态代码。

6. ValidateForm可能绑定到模板上的某些onInput或onChange事件
   **观察者始终在查找状态代码并更新表单上下文