Как использовать Nuxt.js + axios + async?

Question

[marrrr]

Здравствуйте! Я новичок в программировании. Пытаюсь подгрузить в компонент данные из JSON файла, чтобы получился список. Читаю документацию и недоумеваю.
(Пытаюсь вот этот метод из руководства использовать:

export default {
  async data ({ params }) {  // Что это за params и зачем тут получать id?
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}

А это мой код в Nuxt.js компоненте.

<li class="item" v-for="post in posts"  v-bind:key="post.id">
  <nuxt-link active-class="is-active" :to="'/'+ post.title">
   {{post.id + 1}}. {{post.title}}
  </nuxt-link>
</li>

import axios from "axios";
export default {
    async data () {
      let { data } = await axios.get(`http://jsonplaceholder.typicode.com/posts/`)
      return { posts: data } // Получаю: property post is not defined
    }
  }

Возможно, тут все явно, но я даже пока ES6 не особо понимаю. Объясните языком для "чайников", пожалуйста.

Answer 1

[Горгулий Магниевич]

Доброго! Вопрос уже решён? Всё-таки год прошел... И вот я, новый новичок, только-только подобрался почти к такому же вопросу, но с некоторыми важными уточнениями:

1) Речь идёт о методе asyncData или о стандартных JavaScript-функциях async/await? Это важное уточнение, поскольку asyncData – это собственный метод фреймворка Nuxt.js для извлечения данных с рендером на стороне сервера, и он может использоваться двумя способами:
а) Возвращая промисы
б) С помощью упомянутых выше async/await

2) Есть Axios "изначальный" – это основанный на промисах HTTP-клиент для браузера и ноды. А есть Axios для Nuxt.js – это доработанный с учетом особенностей фреймворка Axios "изначальный", используемый, как сказано в доках, для обеспечения изоморфности HTTP-запросов и в своих проектах Nuxt.js они строго рекомендуют использовать именно его:
npm install @nuxtjs/axios
Установка и использование

Асинхронность в Nuxt – это целый курс, который надо изучить и отработать на практике чтобы понять. А дальше, может случиться как у меня – добившись асинхронности захочется реактивности ))) А это совсем другая история...

Comments

[Zhalgas Saparov]

Спасибо за ответ и курс, теперь мне стало более менее понятно с async в Nuxt :)

[Таня]

Спасибо за курс! Странно почему так мало информации как отправлять запросы post с помощью модуля axios на nuxt , надеюсь курс раскроет эту тему

Answer 2

[Евгений]

Попробуйте axios.$get