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

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

加载程序应在您的请求开始之前显示。请注意，当请求完成时axios.get()返回一个Promise解析，因此您可以使用Promise.prototype.finally关闭它Promise来隐藏加载程序：

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()

  }

}

Answer 2

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

      });

    },