VueJS:如果x秒内未收到接口响应，则设置属性

Question

我的VueJS应用程序使用axios向后端发出请求。假设有以下调用：

const response = await ApiService.getDocuments();

响应可能需要一些时间(例如5-10秒)，因为服务器还会执行后台处理。现在，我想显示一个加载指示器，但仅当在2秒内没有响应时才显示。因此伪代码可能如下所示：

this.showProgressIndidcator = false;
const response = await ApiService.getDocuments();

// this property shall be set if there is no response within 2 seconds
this.showProgressIndidcator = true;

我该如何用VueJS做什么呢？我们也使用lodash，这可能会提供一些合适的东西？

Answer 1

使用setTimeout，它在2秒后运行

// initial state
this.showProgressIndidcator = false;

// set state after 2 seconds
this.loadingTimer = setTimeout(() => this.showProgressIndidcator = true, 2000);

// call api
const response = await ApiService.getDocuments();

// clear timeout
clearTimeout(this.loadingTimer);

// clear state
this.showProgressIndidcator = false;