Как правильно организовывать запросы на фронте?

Question

[Дима Паутов]

Добрый вечер!

Возник у меня такой вопрос, ранее как-то с этим не запаривался или не сталкивался.
Допустим, есть у нас на фронте сервисы, в которых лежат методы запросов к разным разделам api, например:

Сервисы

Для страниц статей получаем статьи

// services/ArticlesService.js

class ArticlesService {
  getArticles (params = {}) {
    return axios.get('/api/articles', {
      params
    });
  }

  //.....
}

Для страниц музыки получаем треки

// services/AudioService.js

class AudioService {
  getAudio (params = {}) {
    return axios.get('/api/audio', {
      params
    });
  }

  //.....
}

Для страниц книг получаем книги

// services/BooksService.js

class BooksService {
  getBooks (params = {}) {
    return axios.get('/api/books', {
      params
    });
  }

  //.....
}

Вроде всё понятно и очевидно. И тут появляется главная страница, на которую тоже нужно вывести слайдер с книгами, слайдер с статьями, слайдер с музыкой. Но для главной страницы, эти данные формируются иным способом. Например ручками в админке.

Появляются 3 новых маршрута у api:

• /api/home/books
  
• /api/home/audio
  
• /api/home/articles
  

Где правильнее будет разместить методы для запроса у этих апишек? Создать ещё 1 сервис home и в него добавить методы, или же раскидать эти методы к тем сервисам, за сущности которых они отвечают. Ведь по сути не важно, куда они выводятся, важно лишь то, что это 1 сущность, книги к книгам, статьи к статьями и т.п.

Поделитесь мнением, кто как делает и почему, буду очень благодарен!

Comments

[Алексей Дубровин]

Ну, во первых вы ведь каждому классу задаёте име что-то типо Book/Audio/....Service
Зачем вы потом в методах указываете get(book/Audio). Я же и так в этом классе. Зачем мне уточнения?
1) Сделайте обозначение, которое будет описывать что это запрос на получение данных.
Если это сервис. То какие 2 класса он связывает ?
Зачем мне сервис который вызывает 1 метод запроса "Для конкретного класса"
Что мне мешает запихнуть запрос в класс для работы с (книгами, аудио)

Answer 1

[WapSter]

Я использую конcтруктор запросов, вот накидал простенький пример:

class Get {
  constructor(entity) {
    this.entity = entity;
    this.query = []
  }
  addFilter(field, type, val) {
    this.query.push(`filter=${field}||${type}||${val}`)
    return this
  }
  addOrder(field, direction) {
    this.query.push(`order=${field}||${direction}`)
    return this
  }
  async send() {
    const queryString = this.query.length ? '?params|' + this.query.join('&') : '';
    return await console.log(this.entity + queryString)
    // вместо console.log к примеру axios
  }
}

const books = new Get('books').send() 
// books
const audio = new Get('audio').addFilter('id', 'eq', 1).send() 
//audio?params|filter=id||eq||1
const images = new Get('images').addFilter('name', 'like', 'cat').addOrder('createdAt', 'DESC').send() 
// "images?params|filter=name||like||cat&order=createdAt||DESC"

На бэкенде используется парсер, который определяет, что от него хочет получить фронт. Все управление запросом ложится на параметры и методы. Плюс в том, что не нужно создавать кучу сервисов на каждый роут api. Появляется некоторый структурный подход к работе с апи на фронте и бэкенде ускоряет работу над большими проектами.