Как составить цикл получения данных сервера с преобразованием всех данных в 1 массив?

Question

[Алексей]

На сервере стоит ограничение в 1 000 строк на вывод данных, но необходимо вывести данные в размере 2 931
Как составить цикл который будет получать данные постранично, а после прохождения всех страниц соединит все данные в 1 массив

Comments

[Вадим]

для этого желательно чтобы на сервере была возможность пагинации, или, как минимум, чтобы сервер давал в ответе сколько всего элементов

[Алексей]

Вадим, на сервере есть пагинация, сервер отдает количество объектов

[Алексей]

Вадим,

[Вадим]

Алексей, и с чем в таком случае у Вас возникает сложность?

[Алексей]

Вадим, не понимаю как построить такой цикл

[Вадим]

Алексей, Ну а мысли какие? Что Вы уже попробовали сделать и что не вышло?

[Алексей]

Вадим, я пробовал отправлять множество запросов, указывая в каждом с какой страницы взять данные и куда их записать, потом пытался методом push() добавить это в переменную которая отвечает за вывод всех данных

[Вадим]

Алексей, так, ну звучит как в целом не плохой план. Что же пошло не так?

P.s. будем дальше в детективный роман играть? Или предоставите код и нормально опишите вопрос с указанием что сделали, что не вышло?

[Алексей]

Так как не вышло разобраться с циклом, решил попробовать через множественные запросы

mounted(){
        this.loaderAbandon = true
        api.getWagonsThrow(this.filter_abadon)
        .then((response) => {
            // this.throwWagons = response.data.data
            this.page1 = response.data.data
            this.amount = response.data.amount
            this.total_objects = response.data.total_objects
            this.total_pages = response.data.total_pages
        }),
        api.getWagonsThrow(this.filter_abadon2)
        .then((response) => {
       
            this.page2 = response.data.data
        }),
        api.getWagonsThrow(this.filter_abadon3)
        .then((response) => {
   
            this.page3 = response.data.data
        }),
        api.getWagonsThrow(this.filter_abadon4)
        .then((response) => {
            
            this.page4 = response.data.data
        }),
        api.getWagonsThrow(this.filter_abadon5)
        .then((response) => {
           
            this.page5 = response.data.data
        }),
        api.getWagonsThrow(this.filter_abadon6)
        .then((response) => {
            this.page6 = response.data.data
            this.throwWagons = this.page1 + this.page2 + this.page3 + this.page4 + this.page5 + this.page6
            this.loaderAbandon = false
        })

запрос к API

const getWagonsThrow = (filter_abadon,filter_abadon2,filter_abadon3,filter_abadon4,filter_abadon5,filter_abadon6) => {
    return api.get(`${resource}/dislocations?operation=БРОС`, {params: filter_abadon,filter_abadon2,filter_abadon3,filter_abadon4,filter_abadon5,filter_abadon6})
}

@MrDecoy,

data(){
        return{
            throwWagon: '',
            throwWagons: '',
            loaderAbandon: false,
            amount: null,
            total_objects: null,
            total_pages: null,
            
            showNotify: false,
            notifyHead: '',
            notifyMessage: '',
            notifyClass: '',
           page1: '',
           page2: '',
           page3: '',
           page4: '',
           page5: '',
           page6: '',

            filter_abadon: {
                wagon__wagon_type: '',
                page_size: 500,
                page_number: '1',
            },
            filter_abadon2: {
                wagon__wagon_type: '',
                page_size: 500,
                page_number: '2',
            },
            filter_abadon3: {
                wagon__wagon_type: '',
                page_size: 500,
                page_number: '3',
            },
            filter_abadon4: {
                wagon__wagon_type: '',
                page_size: 500,
                page_number: '4',
            },
            filter_abadon5: {
                wagon__wagon_type: '',
                page_size: 500,
                page_number: '5',
            },
            filter_abadon6: {
                wagon__wagon_type: '',
                page_size: 500,
                page_number: '6',
            }
        }
    },

[Алексей]

По итогу код выводит просто 500 элементов, а не все необходимые

[Алексей]

Вадим, Так же пытался сделать через цикл while

mounted(){
        this.loaderAbandon = true
        api.getWagonsThrow(this.filter_abadon)
        .then((response) => {
            while(this.filter_abadon.page_number != null){
                this.throwWagons.push()
                this.filter_abadon.page_number ++
            }
            this.amount = response.data.amount
            this.total_objects = response.data.total_objects
            this.total_pages = response.data.total_pages
        })

[Вадим]

Алексей, Ну для хардкода количества запросов попытка не плохая. Думаю, Вам не хватило знания Promise.all.

Версию с циклом я что-то не понял где там у Вас делаются дополнительные запросы.

Вот на коленке, СХЕМАТИЧНО, как примерно может выглядеть решение:

function fetchAll(options) {
  return fetch(options) // Делаем первый запрос
    .then(response => { // получаем ответ первой запрошенной страницы
      const nextPages = [] // формируем массив промисов для всех остальных страниц, чтобы запросы пошли в параллель.

      for (let i = response.page_number; i < response.total_pages; i += 1) { // от первой запрошенной страницы, до последней
        const options = { ...options, page: i+1 } // инкрементируем страницу
        nextPages.push(fetch(options)) // пушим промис в массив
      }

      return Promise.all(nextPages).then(nextPagesData => { // когда все наши запросы последующих страниц выполнились
        return [].concat(response, ...nextPagesData) // возвращаем результирующий массив всех данных, первая страница + все последующие
      })
    })
}

[Алексей]

Вадим, так же пробовал такой вариант, при таком происходит капитальное повисание

this.loaderAbandon = true
        api.getWagonsThrow(this.filter_abadon)
        .then((response) => {
            while(response.data.links.next != null){
                this.throwWagons.push()
                response.data.links.next++
            }
            // this.throwWagons = response.data.data
            this.amount = response.data.amount
            this.total_objects = response.data.total_objects
            this.total_pages = response.data.total_pages
            this.loaderAbandon = false
        })