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.runThisAfterArrayPopuples((；当this.myArray只有一个对象而没有整个axios数据时运行，它没有给它足够的时间运行。我很确定发生这种情况的原因是，在生产服务器中，我的axios比在本地主机中花费的时间更长，然后我填充数组，由于Javascript是异步的，所以函数runThisAfterArrayPopuples((似乎在我的数组完全填充之前运行。

我读过关于承诺的文章，但我不完全确定它在这里会如何适用。

我已经声明要运行这个.fetchData((；内部beforeMounted:而不是create:，我也尝试在axios.then((内部调用this.runThisAfterArrayPopuples((，但我在生产中仍然面临长度为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((；调用挂载的本身。