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

Как в VUE показать preolader пока ВСЕ $http запросы не завершились и все данные с сервера не загрузились ?
  • Вопрос задан
  • 2204 просмотра
Решения вопроса 1
@ber_enot
Веб-разработчик, Vue.js / Node.js
В событие компонента 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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы