Как правильно делать запросы на backend в nuxt.js?

@maymie 

Nuxt.js это фреймворк на основе Vue.js, который предоставляет набор утилит и инструментов для разработки приложений с серверным рендерингом.

Для выполнения запросов к бекенду в Nuxt.js можно использовать несколько различных методов:

1. Axios: это популярная библиотека для выполнения HTTP-запросов, которая интегрирована в Nuxt.js по умолчанию. Можно использовать ее в компонентах Vue.js, модулях Nuxt.js или в методах хуков (hooks).
2. $fetch: это асинхронный метод, который предоставляет Nuxt.js для выполнения запросов к API на сервере. Он вызывается в методах хуков (hooks) или в асинхронных методах компонентов.

В зависимости от потребностей проекта, можно использовать любой из этих методов для выполнения запросов к бекенду в Nuxt.js.

@maymie 

Вот примеры использования обоих методов:

1. Использование Axios:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Ваш компонент Vue.js
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('/api/users')
        this.users = response.data
      } catch (error) {
        console.error(error)
      }
    }
  },
  mounted() {
    this.fetchUsers()
  }
}

1. Использование $fetch:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// Ваш компонент Vue.js
export default {
  data() {
    return {
      users: []
    }
  },
  async fetch() {
    try {
      const response = await this.$fetch('users')
      this.users = response
    } catch (error) {
      console.error(error)
    }
  }
}

В обоих примерах мы делаем GET-запрос на /api/users и сохраняем полученные данные в this.users. В случае ошибки выводим сообщение об ошибке в консоль.