Есть ли способ выполнить один и тот же запрос с использованием axios для нескольких компонентов одновременно?

Question

Стоян

vuex , vue

Есть ли способ выполнить один и тот же запрос с использованием axios для нескольких компонентов одновременно?

У меня есть несколько компонентов <form-builder id="N">, каждый из которых генерирует индивидуальную контактную форму на основе своих настроек. Когда каждый компонент монтируется на странице, он отправляет axios запрос к базе данных, чтобы получить свои настройки. Перед вопросом:

Есть ли способ собрать массив id номеров из всех компонентов и выполнить один axios запрос для получения настроек всех форм, а затем распределить эти настройки по соответствующим компонентам?

Возможно ли это? Спасибо!

16 ноября 2023 г. 17:19

Ответы на вопрос 2

Похожие вопросы

Answer 1

Да, это возможно. Вы можете использовать Promise.all для выполнения нескольких запросов одновременно с помощью axios. Вам необходимо собрать массив всех id компонентов и создать массив промисов, в которых каждый промис будет выполнять запрос для получения настроек каждого компонента. Затем вы можете использовать Promise.all для выполнения всех запросов и получения результатов. Когда все запросы завершатся, вы можете распределить настройки по соответствующим компонентам.

Вот пример кода:

```javascript
import axios from 'axios';

// Функция для выполнения запроса на получение настроек для определенного компонента
const getSettings = (id) => {
  return axios.get(`/api/settings/${id}`)
    .then(response => response.data)
    .catch(error => {
      console.error(`Error while fetching settings for component ${id}:`, error);
      throw error;
    });
};

// Функция, которая выполняет запросы для получения настроек всех компонентов
const getAllSettings = (componentIds) => {
  // Создаем массив промисов для каждого компонента
  const promises = componentIds.map(id => getSettings(id));

  // Используем Promise.all для выполнения всех запросов
  return Promise.all(promises)
    .then(results => {
      // Возвращаем массив с результатами запросов
      return results;
    })
    .catch(error => {
      console.error('Error while fetching settings for all components:', error);
      throw error;
    });
};

// Использование getAllSettings для получения настроек всех компонентов
const componentIds = ['N1', 'N2', 'N3']; // Здесь нужно собрать массив всех id компонентов

getAllSettings(componentIds)
  .then(results => {
    // Здесь вы можете распределить настройки по соответствующим компонентам
    console.log('Settings for all components:', results);
  })
  .catch(error => {
    console.error('Error while fetching settings for all components:', error);
  });
```

Вы можете добавить этот код в вашу реализацию компонентов <form-builder> и вызывать getAllSettings при монтировании каждого компонента для получения настроек. Затем вы можете распределить настройки по соответствующим компонентам внутри обработчика then.

Answer 2

Делайте запрос на уровень выше - на странице, где вызывается компоненты формы. В этом запросе передавайте props с настройками для генерации формы. Если в вашем проекте есть несколько страниц, на которых могут быть вызваны компоненты формы, создайте обёртку для формы, в которую передавайте массив id. Затем сделайте запрос на сервер уже на основе этого массива id.