Прелоадер в приложении Vue.js?

Question

Я новичок в Vue.js экосистеме и мне нужен совет.

Я делаю GET request с помощью axios пакета.Я хочу показать preloader для полной страницы, пока все данные не пришли.Я думаю, что эта задача не нова, но я хочу понять, как это обычно делается в Vue.js.

Для preloader я создаю новый компонент.Я немного смущен.Как вызвать этот компонент из другого и сделать видимым в определенное время.

Answer 1

Axios работают иначе, чем ajax.Можно сказать, предварительная версия javascript ajax-функции.

Маленький пример axios:

 const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Ссылка: https://github.com/axios/axios

Answer 2

Вы могли бы показать свой интерфейс предварительной загрузки перед axios all & spread (чтобы сделать все ваши запросы) и then, чтобы скрыть этот интерфейс предварительной загрузки.Вот в примере:

// show preload ui
showSpinnerAnimation();

// Requests will be executed in parallel...
axios.all([
  axios.get('https://somelink');
  axios.get('https://someotherlink')
])
.then(axios.spread(function (somelinkResponse, someotherlinkResponse) {
  //... but this callback will be executed only when both requests are complete.
  console.log('somelinkResponse', somelinkResponse.data);
  console.log('someotherlinkResponse', someotherlinkResponse.data);

  // hide preload ui
  hideSpinnerAnimation();
}));