为什么带有axios的vue.js语句稍后启动？

Question

首先，我想将数据存储在来自response.data的this.result中。而且我想知道为什么在开始'.then（function（response）

之前先启动底部的警报语句。

Answer 1

您的警报将立即显示，因为axios.get(..)处于非阻塞状态或asynchronous。

这是要理解的关键概念-就您的应用而言，这意味着您可以调用axios.get(..)而不会中断（或阻止）程序继续运行（即使GET请求很忙）在后台工作）。

这就是为什么您会立即看到警报对话框的原因。

axios.get(..)稍后完成或失败时，将调用您提供给.then()或.catch()的函数。

如果您希望在收到服务器的成功响应后显示警报，请按以下方式更新代码：

axios.get(.., { 
   .. 
})
.then((response) => {

    this.result = response.data;
    // Move alerts into the function within your then() handler
    alert('test');
    alert(this.result[0].model_name);
})
.catch((error) => {
    console.log(error);
});