Javascript / Vue 一个接一个地执行一个函数（同步）

Question

我需要在 VueJs 中运行一个又一个函数

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();
          }
        }
},

在我的开发本地主机上测试时，一切运行都符合预期。

一旦我上传为生产应用程序，函数 this.runThisAfterArrayPopulates(); 运行s当this.myArray只有一个对象而不是整个axios数据时，它没有给它足够的时间运行。我很确定发生这种情况的原因是因为在生产服务器中我的 axios 比我的本地主机花费的时间更长，然后我填充数组并且由于 Javascript 是异步的，所以函数运行ThisAfterArrayPopulates () 运行s 在我的数组完全填充之前。

我读过有关 promises 的内容，但我不完全确定它是否适合这里。

我已经尝试运行 this.fetchData();在 beforeMounted: 而不是 created: 中，我也尝试在 axios 中调用 this.runThisAfterArrayPopulates() .then() 但我在生产中仍然面临长度为 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();
},

由于处理程序方法是一个箭头函数，这应该不会造成问题。如果您使用普通函数代替箭头函数，请注意这个陷阱。

编辑： 您可以尝试移动 this.fetchData();调用挂载本身。

Javascript / Vue 一个接一个地执行一个函数（同步）

Javascript / Vue Executing a function after another (synchronously)

javascript

synchronization

asynchronous

vue.js

vuejs2