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

Question

В моем приложении у меня есть страница продавца, которая отображает продукты, перечисленные этим продавцом. Я использую 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' })
    });
},

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

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

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

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

Answer 1

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

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

Запрос 2:

{{todos.title}}

{{ todos.completed }}

импорт axios из "axios"; экспорт по умолчанию { async asyncData ({params}) { // Мы можем использовать функцию async / await ES6 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}; }, голова() { вернуть { title: this.post.title }; } };

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

Answer 2

Может быть и так?

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 будет ждать выполнения всех обещаний и вернет результат вызова.