在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) {&nbsp; &nbsp; this.loading = true; // AJAX request is loading&nbsp; &nbsp; return axios.get(`${host}/api/messages`, {&nbsp; &nbsp; &nbsp; params: {&nbsp; &nbsp; &nbsp; &nbsp; me:&nbsp; &nbsp; &nbsp; localStorage.getItem("user_id"),&nbsp; &nbsp; &nbsp; &nbsp; device:&nbsp; localStorage.getItem("device_id"),&nbsp; &nbsp; &nbsp; &nbsp; peer: peer&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; },loadMessages() {&nbsp; &nbsp; &nbsp; var self = this;&nbsp; &nbsp; &nbsp; backend.getMessages().then(function(resp) {&nbsp; &nbsp; &nbsp; &nbsp; self.previousDate = null;&nbsp; &nbsp; &nbsp; &nbsp; self.messages = resp.data;&nbsp; &nbsp; &nbsp; &nbsp; self.openLoader();&nbsp; &nbsp; &nbsp; &nbsp; self.loading = false // spinner disappear&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },