Как ограничить количеством get запрос на json file?

Question

[Ibishka]

У меня есть папка db внутри news.json в папке public. Я делаю запрос получаю все news но мне нужно например с перва 10 постов получить а потом при скроллинге еще 5 и т.д. Как ограничить количеством ?

Answer 1

[Andrey Suha]

А вы получайте все но при скролле показывайте только те которые нужны и не делайте каждый раз запрос на json

Comments

[Ibishka]

Andrey Suha я про то как делается в инстаграм и т.д т.к все сразу показать это плохо.

[Andrey Suha]

Ibishka, а я не предлагаю Вам показывать все сразу я предлагаю загрузить сразу весь json и показывать по мере скрола. Это называется бесконечный скролл. Если бы не было бесконечного скролле, бы ли просто страницы, то для каждой страницы у Вас бы был url по типу /news?page=2. Здесь тоже самое. У вас триггер, когда Вы до него доскраливате на сервер отправляется ajax запрос в котором вы передаёте параметром номер страницы которую нужно загрузить и он Вам возвращает записи которые относятся к конкретной странице. А так как сервер у Вас нету, то Вы можете загрузить полностью весь json в память, и хранить его например в vuex, и написать функцию которая будет принимать параметр страницы и возвращать ее записи

Answer 2

[Alex]

я про то как делается в инстаграм и т.д т.к все сразу показать это плохо

В инстаграм и т.д сервер возвращает ответ первых 10 постов. Потом опять к серверу обращаются и тот возвращает следующие 10 и так далее. У вас на сервере, должен быть какой-то контроллер который будет возвращать ограниченный набор данных.

Comments

[Ibishka]

Alex делаю проект для портфолио так мне все сразу показывать т.к данные не в сервере а в json file?

[Ibishka]

Alex Может хранять в vuex store а там сделать контроллер? Такое возможно ?

[Alex]

Ibishka, Нет, отображать всё сразу не очень хороший подход для производительности на страницу.

1. Вы можете запросить все данные из файла, но отобразить их по частям.
   
2. Вы можете написать какую-то абстракцию. Которая будет имитировать ваш сервер. Обращаясь к ней она будет возвращать данные по частям, но под капотом будет запрашивать файл полностью.
   
3. Вы можете заморочиться и считывать ваш файл по кускам. Готовые библиотеки для этого найдёте в интернете.
   
4. Или, вы можете написать простейший сервер. Который при запросе будет считывать файл json, но на клиент отдавать только его часть.
   

На самом деле, абсолютно не важно что вы выберете.

[Ibishka]

Alex, 1 пункт удобен но как примерно сделать функцию которая например дал первые 10 а потом сного но с 11 пропустил 10 первые?

[Alex]

Ibishka, Пожалуй, если для портфолио, то второй вариант более предпочтительный с точки зрения работодателя. Это даёт лучшее представление о структуре вашего проекта и что входит в зону вашей ответственности а что нет.

[Ibishka]

Alex, Ваш 2 пункт?

[Alex]

Ibishka,

как примерно сделать функцию которая например дал первые 10 а потом сного но с 11 пропустил 10 первые?

Примерно вот так:

class ServerPlaceHolder {
  
  #posts = [];
  #postsPerPage = 10;
  
  constructor({posts = [], postsPerPage = 10 }) {
    this.#posts = posts
    this.#postsPerPage = postsPerPage
  }
  
  *posts () {
    let postsToPage = []
    let currentPage = 0
    do {
      postsToPage = this.#posts.slice(currentPage++ * this.#postsPerPage, currentPage * this.#postsPerPage);

	if (postsToPage.length)
      yield postsToPage

    } while(postsToPage.length)
  }
}

Ваш 2 пункт?

Да. Если бы я делал — то делал бы именно так.

[Ibishka]

Alex, Это на каком языке?

[Alex]

Ibishka, JavaScript

[Ibishka]

Alex, Это куда добавить?

[Alex]

Ibishka,

Это куда добавить?

Это уж решайте сами

Answer 3

[Илья Пономарев]

Можно использовать `debounce` из библиотеки `lodash`

Документация lodash
https://lodash.com/docs/4.17.15#debounce

Пример в документации vue
https://ru.vuejs.org/v2/guide/computed.html#%D0%9C...