理解流程時遇到問題-vue和axios處理HTML表單資料

我是 Vue 和 Axios 的新手，并嘗試在 Salesforce Marketing Cloud - Cloud 頁面中使用它。基本上有3個部分，

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');
        }

    }
})

uj5u.com熱心網友回復：

讓我向您解釋您發布的代碼的流程：

• 安裝組件后，第一個被呼叫的方法是mounted(). 在此方法中，您將獲取endopint系結到 html 元素中的action屬性，form并將其系結到資料變數中this.endpoint。
• 現在，您正在validateForm()單擊submit按鈕呼叫方法來驗證輸入欄位。如果驗證通過，您正在呼叫sendFormData()方法來進行POSTAPI 呼叫。
• 獲得回應后，您添加了一個觀察程式，以根據您從 API 回應中收到的狀態代碼status更新值。form.context
• 最后，您正在呼叫checkStatus()axios 呼叫成功的方法，并且在此方法中，您將在 every和 followingcheckStatus()之后再次進行 POST API 呼叫。10 secondsstep 3

uj5u.com熱心網友回復：

1. 安裝組件后，您在（提交？）上運行表單系結操作

2. 該操作可能系結到 sendFormData 函式（在方法中）

3. 在 sendFormData 內部，有 axios 請求的設定，然后是處理來自請求的回應的 then 回呼

4. checkStatus 函式在“then”塊內呼叫

5. 如果先前的回應沒有除 200 或 500 以外的狀態碼，則每 10 秒將相同的資料發送回服務器。

6. ValidateForm 可能系結到模板上的某些 onInput 或 onChange 事件
   ** 觀察者總是在尋找狀態代碼并更新表單背景關系

標籤：javascript Vue.js 邮政 axios http-post

上一篇：如何修復我的Vue(Vite)應用程式構建中的資產檔案路徑？

下一篇：使用Vue在運行時更改應用程式主題