Как в VUE JS сделать так чтоб при входе на сайт отображался только preloader пока все процессы не завершились?

Question

[Eka555]

Как в VUE показать preolader пока ВСЕ $http запросы не завершились и все данные с сервера не загрузились ?

Answer 1

[Артем]

В событие компонента mounted()
добавить показ прелоадера, запустить методы загрузки данных
убрать прелоадер, когда они завершатся (с помощью Promise.all)
Читать про промисы тут - https://learn.javascript.ru/promise

Примеры:
один запрос:

mounted() {
	this.showPreloader = true
	this.$http.get('/someUrl').then(response => {
		// данные загружены, убираем прелоадер
		this.showPreloader = false
		// записываем полученные данные куда-либо
		this.someData = response.body
	}, response => {
		// запрос завершился ошибкой
		// показываем сообщение об ошибке
		this.showPreloader = false
		this.showError = true
	});
},

Несколько запросов:

mounted() {
	this.showPreloader = true
	Promise.all([
		this.$http.get('/someUrl'),
		this.$http.get('/someUrl2')
	]).then(results => {
		// данные загружены, убираем прелоадер
		this.showPreloader = false
	}, response => {
		// один или несколько запросов завершились с ошибкой
		// показываем сообщение об ошибке
		this.showPreloader = false
		this.showError = true
	});
},

PS. Код справедлив для однофайловых компонентов с использованием Webpack. Используется синтаксис ES6.

Comments

[Eka555]

Про mounted() понял , можете вторую часть про промисы на примере показать где именно нужно вызвать Promise.all и как ? Может тупой вопрос извиняюсь, я просто новичок в VUE. Спасибо большое!

[Артем]

Eka555: обновил ответ, добавил кусок кода

[Eka555]

Спасибо вам большое !!!