Почему await не работает?

Question

[Max9999]

Добрый день.
Не могу понять. На странице есть два компонента. И в каждом при мауенте запрашиваются данные на сервере.

async getprojects (ctx) {
			await axios({
				method: 'post',
				url: 'projects',
				headers: {'Authorization': `Bearer ${token}`},
			})
			.then(response => {
				ctx.commit('updateprojects', response.data)
			})
			.catch(error => {
				console.log(error)
			});
		},

Сделал проверку на jwt токен:

instance.interceptors.request.use(async function (config) {
	if (token && config.url !=='refresh') {
		let unix_timestamp = parseJwt(localStorage.usertoken).exp * 1000
		let date = Date.now()
		let diff = (unix_timestamp - date)/60000
		if (diff < 0.2) {
	 		let res = await store.dispatch('refresh')
		}
	}
    return config;
  }, function (error) {
    return Promise.reject(error);
});

Проблема, запросы заходят одновременно и выполняются параллельно. Как сделать, что ждали своей очереди?

Answer 1

[Aetae]

Из вопроса не слишеом понятно, но если я правильно понял вопрос: mount - не асинхроный(как и все vue-хуки), компоненты не ждут друг друга и рисуются когда того требует логика отображаения.
Если один запрос у вас зависит от результата другого - сделайте отдельный сервис запросов, который будет реализовывать всю нужную логику, а не запускайте запросы напрямую через axios.
Если один компонент у вас зависит от работы другого(такого лучше не делать на самом деле) - монтируйте его только тогда, когда от этого другого поступит событие о завершении работы(посланное вами же через $emit).

Comments

[Max9999]

они не зависят друг от друга. В хедера запрашивается одна информация. В теле странице другая. А как тогда их в очередь выстроить?

[Aetae]

Max9999, говорю же - написать сервис запростов. Условно(очень условно):

const queue = [];

function addToQueue(args = []) {
  const item = [args];
  const promise = new Promise(item.push.bind(item));
  queue.push(item);
  return promise;
}

function next(first) {
  if(!first) queue.shift();
  if(!queue.length) return;
  const [args, resolve, reject] = queue[0];
  axios(...args).then(resolve, reject).finally(next);
}

function axiosQueue(...args) {
  const promise = addToQueue(args);
  if(queue.length === 1) next(true);
  return promise;
}

axiosQueue(...);
axiosQueue(...);
axiosQueue(...);