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