在理解流程时遇到问题 - HTML 由 vue 和 axios 处理表单数据

Question

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

HTML + vue page : 这是一个表单页面，要求用户输入自动化名称并点击发送按钮
App.js : 这是使用 axios 和 Vue 构建的。
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 的表单处理程序代码称为 ?或者 post 页面中使用的 post 方法直接调用 form-handler 页面并启动自动化？

这里是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

安装组件后，您运行表单绑定操作（提交？）
该操作可能绑定到 sendFormData 函数（在方法中）
在 sendFormData 里面，有 axios 请求的设置，然后是处理请求响应的 then 回调
在“then”块中调用了 checkStatus 函数
每 10 秒将相同的数据发送回服务器，如果之前的响应除了 200 或 500 之外没有其他状态代码。
ValidateForm 可能绑定到模板上的某些 onInput 或 onChange 事件
** 观察者一直在寻找状态码并更新表单上下文

Answer 2

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

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

在理解流程时遇到问题 - HTML 由 vue 和 axios 处理表单数据

Having issues understanding flow - HTML form data handling by vue and axios

javascript

post

http-post

vue.js

axios