Javascript / Vue 依次執行 function（同步）

Question

我需要在 VueJs 中一個接一個地運行一個 function

data: function() {
        return {
            stuff: '',
            myArray:[
                {
                    "id": 0,
                    "value1": 0,
                    "value2": '',
                    "etc": ''
                },
            ],
        };
},
methods: {
     fetchData() {
            axios.get('/api/get-data')
                .then(res => {
                    this.myArray = res.data;
                }).catch(err => {
                console.log(err)
            })
        },
     runThisAfterArrayPopulates(){
        /*a bunch of code that relies on the contents from this.myArray , therefore I need this.myArray to be fully populated/finalized, for example*/
       for (i = 0; i < this.myArray.length; i++) {
                /*at this point on development server this.myArray.length is 60, on production it is 1 */
                }
            }
     }
}

我目前執行這些功能如下：

created: function () {
        this.fetchData();
},
mounted: function () {
        document.onreadystatechange = () => {
          if (document.readyState == "complete") {
            console.log('Page completed with image and files to ensure it is executed at the very end')
            this.runThisAfterArrayPopulates();
          }
        }
},

在我的開發本地主機上測試它時，一切都按預期運行。

一旦我作為生產應用程序上傳，function this.runThisAfterArrayPopulates(); 當 this.myArray 只有一個 object 而不是整個 axios 數據時運行，它沒有給它足夠的時間來運行。 I am pretty sure that the reason this is happening is because in the production server my axios takes longer than in my localhost, then I populate the array and since Javascript is async it seems that the function runThisAfterArrayPopulates() runs BEFORE my array is fully populated .

我已經閱讀了有關承諾的內容，但我不完全確定它如何適合這里。

我試圖運行 this.fetchData(); 在 beforeMounted: 而不是 created: 中，我還嘗試在 axios.then() 內部調用 this.runThisAfterArrayPopulates() 但我仍然面臨生產中長度為 1 的數組。

注意：我確信代碼可以正常工作，它在開發中完美無缺，如果我創建這樣的按鈕：

<button @click="runThisAfterArrayPopulates()">Click me</button>

當我單擊按鈕時，行為是完美的，所以我確信它與執行順序有關。

Answer 1

如下更改您的代碼。

    methods: {
         fetchData() {
                
                axios.get('/api/get-data')
                    .then(res => {
                        this.myArray = res.data;
                        this.runThisAfterArrayPopulates(); // Added method call.
                    }).catch(err => {
                    console.log(err)
                })
            },
         runThisAfterArrayPopulates(){
            /*a bunch of code that relies on the contents from this.myArray , therefore I need this.myArray to be fully populated/finalized */
         }
    },


created: function () {
        // this.fetchData();
},
mounted: function () {
        this.fetchData();
},

由於處理程序方法是箭頭 function，這應該不會導致問題。 如果您使用普通 function 代替箭頭 function，請注意這個問題。

編輯：您可以嘗試移動 this.fetchData(); 調用掛載本身。