等待API调用，然后继续显示组件

Question

我正在使用axios进行API调用。当鼠标在页面上输入某些HTML元素时，将发生调用。通常，在第一个悬停时没有接收到任何数据，但是在第二个悬停时通常显示数据。我认为这是因为我没有等待API调用返回。有办法实现吗？

下面是我用来进行API调用的Axios实例。

感谢您的时间和考虑。

instance
.get('observations?patientId=37')
.then((response) => {
   this.clinicaltabs[0].title = response.data.data;
});

Answer 1

我会做什么：

对可悬停的HTML元素使用微调加载，并在发送请求时使其可见。

this.loading = true; //Some way for disabling the hover event

instance
.get('observations?patientId=37')
.then((response) => {
   this.clinicaltabs[0].title = response.data.data;
})
.finally(() => this.loading = false);

然后，您可以使用v-if="loading"或类似的方法来控制组件的显示，直到加载为止。