1

есть апиха на джанге(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)

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

1
  • Если ваша апиха и ваш браузер находится на разным компах, тогда вот в этой строке http://127.0.0.1:8000/api/workouts/ у вас явные проблемы с пониманием кто куда должен слать запросы... 28 апр 2021 в 2:19

1 ответ 1

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,
    }
2
  • кажется это решает мою проблему. спасибо!
    – lesnoj
    28 апр 2021 в 8:50
  • @lesnoj если мой ответ вам помог, отметьте его как правильный, там есть галочка. 29 апр 2021 в 10:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.