我想显示一个加载微调框,直到我的消息完成加载。
我在Message.vue
中实现了微调器:
import backend from '...'
export default {
mounted: function() {
this.loadMessages();
},
methods: {
loadMessages() {
var self = this;
backend.getMessages().then(function(resp) {
self.previousDate = null;
self.messages = resp.data;
self.openLoader();
});
},
openLoader() {
let loader = this.$loading.show({
loader: 'spinner',
color: '#e32339',
canCancel: true,
container: this.$refs.loadingContainer
});
setTimeout(() => {
loader.hide()
}, 2500)
},
}
}
我的微调器在容器上显示2500毫秒,但是我只是在模拟它而不知道AJAX请求何时完成。我完全不了解如何显示微调框,直到AJAX请求完成。现在,它只显示2500毫秒。
我的backend.getMessages()
方法如下:
import axios from 'axios'
const host = /* process... */
export default {
getMessages: function (peer) {
return axios.get(`${host}/api/messages`, {
params: {
me: localStorage.getItem("user_id"),
device: localStorage.getItem("device_id"),
peer: peer
}
})
},
//...
}
答案 0 :(得分:1)
var loading
。<div v-if="loading">Spinner here</div>
getMessages: function (peer) {
this.loading = true; // AJAX request is loading
return axios.get(`${host}/api/messages`, {
params: {
me: localStorage.getItem("user_id"),
device: localStorage.getItem("device_id"),
peer: peer
}
})
},
loadMessages() {
var self = this;
backend.getMessages().then(function(resp) {
self.previousDate = null;
self.messages = resp.data;
self.openLoader();
self.loading = false // spinner disappear
});
},
答案 1 :(得分:1)
应该在请求开始之前 显示加载程序。请注意,axios.get()
返回一个Promise
来解析请求完成的时间,因此您可以使用Promise
中的Promise.prototype.finally
来隐藏加载程序:
mounted() {
// show loader while fetching messages...
const loader = this.$loading.show()
backend.getMessages()
.then(resp => /*...*/)
.finally(() => loader.hide())
}
这是用async
/await
编写的另一种方法:
async mounted() {
// show loader while fetching messages...
const loader = this.$loading.show()
try {
const resp = await backend.getMessages()
/*...*/
} finally {
loader.hide()
}
}