Несколько запросов в Nuxt

Экрану сводки нужны и пользователи, и посты. Два отдельных функций с разными ключами сработают, но логику «загрузить всё для экрана» удобнее собрать в одном обработчике и одном вызове useAsyncData.

Давайте разберём обработчик, который параллельно ждёт два $fetch через Promise.all и возвращает один объект с двумя полями:

<script setup>
	const { data } = await useAsyncData(
		'dashboard',
		async () => {
			const [users, posts] = await Promise.all([
				$fetch(
					'https://jsonplaceholder.typicode.com/users',
				),
				$fetch(
					'https://jsonplaceholder.typicode.com/posts',
				),
			]);
			
			return { users, posts };
		},
	);
</script>
<template>
	<p>
		Dashboard
	</p>
</template>

В data лежит объект с полями users и posts. Выведем по одному списку для каждого массива:

<script setup>
	const { data } = await useAsyncData(
		'dashboard',
		async () => {
			const [users, posts] = await Promise.all([
				$fetch(
					'https://jsonplaceholder.typicode.com/users',
				),
				$fetch(
					'https://jsonplaceholder.typicode.com/posts',
				),
			]);
			
			return { users, posts };
		},
	);
</script>
<template>
	<section>
		<h2>
			Users
		</h2>
		<ul>
			<li
				v-for="user in data.users"
				:key="user.id"
			>
				{{ user.name }}
			</li>
		</ul>
	</section>
	<section>
		<h2>
			Posts
		</h2>
		<ul>
			<li
				v-for="post in data.posts"
				:key="post.id"
			>
				{{ post.title }}
			</li>
		</ul>
	</section>
</template>

Nuxt по-прежнему выполняет обработчик на сервере один раз и передаёт готовый объект в браузер. Параллельные запросы внутри сокращают ожидание по сравнению с цепочкой await друг за другом.

Сделайте страницу /org, где один вызов useAsyncData через Promise.all загружает сотрудников и отделы с тестового API и возвращает объект с полями employees и departments.

Выведите на /org два списка: имена сотрудников и названия отделов из полей возвращённого объекта.