Vue.js应用程序中的预加载器？

Question

I am new in Vue.js ecosystem and need some advice.

I make GET request by axios package. I want to show preloader for full page until all the data came. I think this task is not new but I want to understand how such things are usually done in Vue.js.

For preloader I create new component. I am little bit confused. How to call that component from other one and make visable at a certain time.

Answer 1

You could show your preload ui before an axios all & spread (to make make all your requests) and then to hide that preload ui. Here is in example:

// 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();
}));

Answer 2

Axios work differently then ajax. You can say the advance version of javascript ajax function.

Small Example of 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);
  }
}

Reference: https://github.com/axios/axios