Question

我想显示一个加载微调框，直到我的消息完成加载。

我在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
      }
    }) 
  },
  //...
}

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

Answer 2

应该在请求开始之前显示加载程序。请注意，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()
  }
}

在ajax完成之前，如何显示加载指示器？

2 个答案: