Nuxt - asyncData с несколькими запросами


Nuxt - asyncData с несколькими запросами

10.01.2019 03:40:03 Просмотров 1 Источник

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

asyncData ({params, app, error }) {

    return app.$axios.$get(`/seller/${params.username}`).then(async sellerRes => {

        let [categoriesRes, reviewsRes, productsRes] = await Promise.all([
            app.$axios.$get(`/categories`),
            app.$axios.$get(`/seller/${params.username}/reviews`),
            app.$axios.$get(`/seller/${params.username}/products`)
        ])

        return {
            seller: sellerRes.data,
            metaTitle: sellerRes.data.name,
            categories: categoriesRes.data,
            reviewsSummary: reviewsRes.summary,
            products: productsRes.data,
        }

    }).catch(e => {
        error({ statusCode: 404, message: 'Seller not found' })
    });
},

Хотя этот метод выполняет свою работу, я не могу не думать, что делаю это неправильно.

При переходе на страницу индикатор выполнения nuxt отображается дважды (что странно).

Я уже некоторое время ищу примеры нескольких запросов в asyncData, но их там немного.

Может быть, я не должен вызывать несколько запросов в asyncData?

У вопроса есть решение - Посмотреть?

Ответы - Nuxt - asyncData с несколькими запросами / Nuxt - asyncData with multiple requests

VlaDi4eKK

14.01.2019 01:20:31

Может, и так?

asyncData ({params, app, error }) {

    return app.$axios.$get(`/seller/${params.username}`).then(sellerRes => {
        return Promise.all([
            app.$axios.$get(`/categories`),
            app.$axios.$get(`/seller/${params.username}/reviews`),
            app.$axios.$get(`/seller/${params.username}/products`)
        ]).then((categoriesRes, reviewsRes, productsRes) => {
            return {
                seller: sellerRes.data,
                metaTitle: sellerRes.data.name,
                categories: categoriesRes.data,
                reviewsSummary: reviewsRes.summary,
                products: productsRes.data,
            }
        })
    }).catch(e => {
        error({ statusCode: 404, message: 'Seller not found' })
    });

},

Это цепь обещаний. Первое обещание пытается получить информацию о продавце, если запрос успешен, то создается новый запрос, который будет ждать остальной информации.

Метод asyncData будет ждать завершения всех обещаний и возврата результата вызова.

Является ответом!
waleed ali

15.01.2019 11:49:28

На самом деле, вы можете, используя async await, который тоже выглядит намного чище.

<template>
  <div class="container">
    <h1>Request 1:</h1>
    <h1>{{ post.title }}</h1>
    <pre>{{ post.body }}</pre>
    <br />
    <h1>Request 2:</h1>
    <h1>{{ todos.title }}</h1>
    <pre>{{ todos.completed }}</pre>
  </div>
</template>

<script>
import axios from "axios";

export default {
  async asyncData({ params }) {
    // We can use async/await ES6 feature
    const posts = await axios.get(
      `https://jsonplaceholder.typicode.com/posts/${params.id}`
    );
    const todos = await axios.get(
      `https://jsonplaceholder.typicode.com/todos/${params.id}`
    );
    return { post: posts.data, todos: todos.data };
  },
  head() {
    return {
      title: this.post.title
    };
  }
};
</script>

вот его рабочая песочница. (не забудьте добавить значение для параметра маршрута :id)

Andrew Savetchuk

17.01.2020 10:37:32

Попробуйте использовать async await, так вы можете запускать оба запроса параллельно:

async asyncData ({ $axios }) {
  const [categoriesRes, articlesRes] = await Promise.all([ 
    $axios.get('/fetch/categories'),
    $axios.get('/fetch/articles'),
  ])

  return {
    categories: categoriesRes.data,
    articles: articlesRes.data,
  }
},
Помочь в развитии проекта:
Закрыть X