Правильный способ обработки данных в nuxt?

Question

[WAYNEDEV]

Всем привет!

Обычно я делаю запросы в asyncData, и там же обрабатываю данные. Каждая обработка = цикл, который ставит флаги в объектах массива.
Но теперь на странице около 15 запросов и страница начинает давать задержки при загрузке.

Подскажите, поможет ли, если получение данных будет в asyncData, а обработка данных будет происходить в хуке created? Или какой способ самый верный?

Заранее большое спасибо!

Answer 1

[RokeAlvo]

нет не поможет, дело не в том где эти данные обрабатываются.

общая рекомендация: если следующий запрос не зависит от предыдущего делайте их одновременно
т.е. вот так делать НЕ НУЖНО:

async fetch () {
  this.users = await this.$axios.get()
  this.otherData = await this.$axios.get()
}

вместо этого сделайте так:

async fetch() {
  const req = [
    this.$axios.get('/users')
    this.$axios.get('/otherData')
  ]
  const [users, otherData] = await Promise.all(req)
  this.users = users.data
  this.otherData = otherData.data
}

Answer 2

[Aetae]

Совет RokeAlvo полезен, но в браузере также имеется ограничение на количество одновременных запросов, так что 14 - это много. Подумайте как эти запросы объединить. Не думаю, что все они идут в совершенно разные места за совершенно разными данными.
Придётся отойти от прямых запросов по url и написать агрегатор\кэшировщик через который и обращаться за данными, но это неизбежность.