есть апиха на джанге(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)
если любой из запросов убрать, то всë работает
http://127.0.0.1:8000/api/workouts/
у вас явные проблемы с пониманием кто куда должен слать запросы...