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

@loyal 

В Nuxt.js запросы на backend можно делать с помощью библиотеки axios.

Вот пример:

1. Установите axios через npm:

1

npm install axios

1. Добавьте его в ваш Nuxt.js проект:

В файле nuxt.config.js добавьте следующий код:

1
2
3
4
5
6
7
8

module.exports = {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    // настройки для axios
  }
}

1. Создайте файл для запросов:

Создайте папку api в корневой директории проекта и внутри нее файл index.js:

1
2
3
4
5
6
7
8

import axios from 'axios'

export default axios.create({
  baseURL: 'http://example.com/api/',
  headers: {
    'Content-Type': 'application/json',
  },
})

В этом файле мы создаем экземпляр Axios с настройками для базового URL и заголовка.

1. Используйте в своих компонентах:

1
2
3
4
5
6
7
8

import api from '~/api'

export default {
  async fetch() {
    const { data } = await api.get('users')
    return { users: data }
  }
}

Здесь мы импортируем наш файл API, используем его для выполнения запроса GET к /users и получаем ответ в виде данных.

Также можно использовать другие методы HTTP запросов, например POST, PUT и DELETE, а также отправлять данные в теле запроса с помощью параметра data.

Важно помнить, что в Nuxt.js для серверного рендеринга запросы на backend необходимо делать в методе asyncData, а в клиентской части - в методе fetch.

@loyal 

Также стоит упомянуть, что в Nuxt.js есть интеграция с asyncData и fetch методами. Узнайте больше о них в документации Nuxt.js.