Проблема с реализацией нескольких запросов в Nuxt - asyncData

Question

есть апиха на джанге(drf) с моделями: Workout и Post. фронт на наксте. нужно вывести на главной странице посты из Workout, затем блок с постами из Post. делаю это с помощью промисов и async/await. нужно сделать два асинхронных хттп запроса к апихе (получить данные из workout и post) и сохранить промис в переменную data, потом вернуть эту структуру с этой переменной. не понимаю как правильно выполнить эти запросы, чтобы получить результат для вывода:

1. const { data } = await > > 
axios.get(http://127.0.0.1:8000/api/workouts/);
2. const { data } = await 
axios.get(http://127.0.0.1:8000/api/posts/);

data потому, что в ответ на запрос к айпихе получаю json, видимо он доступен по data, где сперва идут данные связанные с пагинацией и уже потом results с нужной структурой. у меня нет опыта в этом и это мой первый вопрос здесь.

<template>
 
 
  <div class="container">
 
    <h1 class="my-3">Вывод наименования тренировки</h1>
    <div class="row">
      <div v-for="workout in workouts" :key="workout.slug" class="col-md-4">
          <div class="card mb-4 shadow-sm">
            <img :src="workout.image" alt="" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">{{ workout.title }}</h4>
              <div v-html="workout.description" class="truncate"></div>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <nuxt-link :to="`/workouts/${workout.slug}`" class="btn btn-sm btn-outline-secondary">Подробнее</nuxt-link>
                </div>
                <small class="text-muted">{{ workout.created_at }}</small>
              </div>
            </div>
          </div>
      </div>
    </div>
 
 
    <h1 class="my-3">Последние записи блога</h1>
    <div class="row">
      <div v-for="post in posts" :key="post.slug" class="col-md-4">
          <div class="card mb-4 shadow-sm">
            <img :src="post.image" alt="" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">{{ post.title }}</h4>
              <div v-html="post.description" class="truncate"></div>
              <div class="mb-2">
                <span v-for="tag in post.tags">
                  <nuxt-link :to="`/tags/${tag}`" class="mr-1 badge badge-info">#{{ tag }}</nuxt-link>
                </span>
              </div>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <nuxt-link :to="`/posts/${post.slug}`" class="btn btn-sm btn-outline-secondary">Подробнее</nuxt-link>
                </div>
                <small class="text-muted">{{ post.created_at }}</small>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
 
 
</template>
 
<script>
import axios from "axios";
export default {
  async asyncData(ctx) {
    const { data } = await axios.get(`http://127.0.0.1:8000/api/workouts/`);
    const { data } = await axios.get(`http://127.0.0.1:8000/api/posts/`);
    return {
      workouts: data.results,
      posts: data.results,
    }
  }
}
</script>
 
<style>
 
</style>

ERROR  Cannot read property 'results' of undefined                                                           22:52:08

  at asyncData (index.vue:61:0)
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (internal/process/task_queues.js:93:5)

если любой из запросов убрать, то всë работает

Answer 1

Нельзя создать две переменные с одинаковым именем через const.

Попробуйте так

    const workouts = await axios.get(`http://127.0.0.1:8000/api/workouts/`);
    const posts = await axios.get(`http://127.0.0.1:8000/api/posts/`);
    return {
      workouts: workouts.data.results,
      posts: posts.data.results,
    }

БЛОГ НА HUSL

Проблема с реализацией нескольких запросов в Nuxt - asyncData

Ответы (1 шт):