@marrrr

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

Здравствуйте! Я новичок в программировании. Пытаюсь подгрузить в компонент данные из 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 не особо понимаю. Объясните языком для "чайников", пожалуйста.
  • Вопрос задан
  • 1592 просмотра
Пригласить эксперта
Ответы на вопрос 1
chuanyurug
@chuanyurug
Системная аналитика, веб-дизайн
Доброго! Вопрос уже решён? Всё-таки год прошел... И вот я, новый новичок, только-только подобрался почти к такому же вопросу, но с некоторыми важными уточнениями:

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 – это целый курс, который надо изучить и отработать на практике чтобы понять. А дальше, может случиться как у меня – добившись асинхронности захочется реактивности ))) А это совсем другая история...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы