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

我需要在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 */
                }
            }
     }
}

在我的开发localhost上测试时，一切都按预期运行

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

我读过关于承诺的书，但我不完全确定它是否适合这里

我已尝试运行此.fetchData（）；在beforeMounted:内部，而不是created:，我还尝试在axios.then（）内部调用this.runThisAfterArrayPopulates（），但在生产中，我仍然面临长度为1的数组

注意：我确信代码是有效的，它在开发中是完美的，而且如果我创建这样一个按钮：

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

点击我

---

当我单击按钮时，行为是完美的，因此我确信它与执行顺序有关。

如下更改代码

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

因为handler方法是一个arrow函数，所以这不会导致问题。如果您使用普通函数代替箭头函数，请注意这个问题

编辑：

---

您可以尝试移动this.fetchData（）；调用挂载本身。

您可以“存储”axios返回的承诺。获取。。。e、 g.

this.someStoredpromise=axios.get（…..等

并像

this.someStoredpromise.then（this.runThisAfterArrayPopulates）

我在你发布的时候尝试过这个，行为是一样的，在开发中很好，但在生产中不起作用。我必须从这个中删除“this.”；为了让它工作，所以我运行了ThisAfterArrayPopulates（）。在执行这一行时，执行顺序似乎仍然存在问题：this.myArray=res.data；@toolni-毫无意义……如果

runthisaftherarraypopulates

是一个

方法：

，那么您真的只能使用

this.runthisaftherraypopulates

运行它。我认为created（）正在被激发，而这个created会对服务器进行ajax调用。因此，即使在ajax调用返回之前，mounted（）：也会被调用。这个执行顺序似乎有问题。删除created（），只需将fetchData移动到mounted（）。糟糕，你完全正确，“这是。”是必需的。我相信你的解决方案有效。让我进一步测试，我会在一分钟内回复你。非常感谢！确认，在生产中效果很好。这解决了执行顺序。再次感谢！

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