Как правильно обработать данные через axious?

Question

[Lord_Dantes]

код

methods: {
    getProductData() {
      this.axios
        .get('http://church/wp-json/wp/v2/news?slug=' + this.$route.params.slug)
        .then(response => this.currentProductData = response.data);
    },
    getMediaUrls() {
      this.currentProductData[0].acf.photos.forEach(el => {
        this.media.readyURLs.push(el.photo);
      })
    }
    
  },

1-й метод вызываю при created(), 2-й при mounted(). Ругается на ".acf", я делаю выводы что данные не успевают прогружаться, собственно вопрос как получать данные так чтобы не было ошибок. Спасибо.

Answer 1

[Aetae]

Хуки Vue синхронные. Никто никого не ждёт. Не вызывайте getMediaUrls пока не будет данных.

Если вызов происходит в шаблоне - во-первых: не используйте методы в шаблонах без крайней необходимости: вместо метода getMediaUrls должно быть computed свойство mediaUrls; во-вторых: скрывайте в шаблоне отображение пока не появятся данные: v-if="currentProductData"/v-if="currentProductData.length" и показывайте вместо этого какой-нить loader, Vue не запросит то, что скрыто под v-if пока условие не станет верным.

...upd: посмотрел полный код. Незачем выносить getMediaUrls в mounted и разрывать асинхронную цепочку. Вызывайте его сразу в getProductData, либо если currentProductData может меняться в иных случаях - сделайте, опять же, computed свойством. В крайнем случае можно вызывать его, повесив watch на currentProductData, но computed лучше.

Comments

[Lord_Dantes]

Указал v-if, перевёл в computed и ошибка осталась.

[Aetae]

Lord_Dantes, неа, не осталась. Код в студию.

[Lord_Dantes]

Aetae,

data() {
    return {
      currentProductDataLoading: true,
      currentProductData: [],
      media: {
        readyURLs: [],
        index: null,
      },
    };
  },
  methods: {
    getProductData() {
      this.axios
        .get('http://church/wp-json/wp/v2/news?slug=' + this.$route.params.slug)
        .then(response => this.currentProductData = response.data);
    },
    getMediaUrls() {
      this.currentProductData[0].acf.photos.forEach(el => {
        this.media.readyURLs.push(el.photo);
      })
    }
  },
  created() {
    this.getProductData();
  },
  mounted() {
    // this.getMediaUrls();
  },
  computed: {
    mediaUrls: function() {
      return this.currentProductData[0].acf.photos.forEach(el => {
        this.media.readyURLs.push(el.photo);
      })
    }
  },

[Aetae]

Lord_Dantes, дай угадаю, ты использовал v-if="currentProductData", а не v-if="currentProductData.length"?

// убрал лишний this, но это ни на что не влияет в данном случае кроме эстетики

[Lord_Dantes]

Aetae, да, изменил на .length - ошибка пропала, спасибо. Но теперь нету данных в media.readyURLs

[Aetae]

Lord_Dantes, ответь мне в чём была проблема, и я отвечу в чём проблема сейчас.:)
Или ты можешь найти ответ на оба вопроса сам.

[Lord_Dantes]

Aetae, я вижу это так. Я получаю данные от сервера вордпресс который присылает мне их через 5 секунд с момента запроса, другие методы которые используются для того чтобы данные изменить (в моем случае собрать ссылки со всех обьектов и поместить в один массив) в момент загрузки страницы сразу же выполняют свою работу, хотя мне нужно чтобы выполняли после получения данных. Я понимаю что видимо не написал этого в коде что я описал выше.

[Aetae]

Lord_Dantes, вообще я не о том спрашивал, но суть верна.)
computed свойство предназначено для того, чтобы возвращать(и запоминать) значение, а не производить сторонние действия. Тебе надо изменить его так:

mediaUrls: function() {
    return this.currentProductData[0].acf.photos.map(el => el.photo);
}

и, само собой, использовать mediaUrls вместо media.readyURLs.

Если же тебе потом нужно будет производить ещё какие-то изменения с массивом media.readyURLs, то можно воспользоваться иными предложенными вариантами.

[Lord_Dantes]

Aetae, не понимаю. computed свойство возвращает мне новый массив с ссылками, который нигде не прикреплен. Я же не могу его(новый массив) использовать указав название computed свойства.

[Lord_Dantes]

Aetae, дошло, благодарю.

[Aetae]

Lord_Dantes, почему не можешь если можешь?)
this.mediaUrls в методах и других computed, просто mediaUrls в шаблоне. Точно также как с тем, что лежит в data. Суть computed в том, что он выполняет функцию(только при обращении) и запоминает результат. Заново он её выполняет, только когда значения обновились. Кэширующий ленивый геттер.

...upd: гуд.)

Answer 2

[VegasChickiChicki]

async getProductData() {
      await this.axios
        .get('http://church/wp-json/wp/v2/news?slug=' + this.$route.params.slug)
        .then(response => this.currentProductData = response.data);
    }

Comments

[Lord_Dantes]

Вот полный код, ошибка осталась.

methods: {
    async getProductData() {
      await this.axios
        .get('http://church/wp-json/wp/v2/news?slug=' + this.$route.params.slug)
        .then(response => this.currentProductData = response.data);
    },
    getMediaUrls() {
      this.currentProductData[0].acf.photos.forEach(el => {
        this.media.readyURLs.push(el.photo);
      })
    }
  },
  created() {
    this.getProductData();
    
  },
  mounted() {
    this.getMediaUrls();
  },

[VegasChickiChicki]

Lord_Dantes,

methods: {
    async getProductData() {
      await this.axios
        .get('http://church/wp-json/wp/v2/news?slug=' + this.$route.params.slug)
        .then(response => this.currentProductData = response.data);
    },
    getMediaUrls() {
      this.currentProductData[0].acf.photos.forEach(el => {
        this.media.readyURLs.push(el.photo);
      })
    }
  },
  async created() {
    await this.getProductData();
    
  },
  mounted() {
    this.getMediaUrls();
  },