Обрабатывать большое количество http-запросов в приложенииact-redux

Question

Мне нужна помощь с моим проектом приложения Reaction-Redux. У меня есть огромные данные, которые я разбил на небольшие файлы, у пользователя есть возможность выбрать начальный и конечный диапазон времени. Когда пользователь нажимает кнопку «Извлечь данные», я создаю объект обещания http-запроса и помещаю его в массив, а затем ожидаю завершения всех запросов с помощью Promise.all (). Он хорошо работает с небольшим временным диапазоном, но если пользователь выберет большой временной диапазон, я могу увидеть отставание в приложении. Я видел более 50 HTTP-запросов в инструментах разработчика Chrome. Мне было интересно, как лучше всего обрабатывать большое количество запросов в приложенииact-redux?

Answer 1

Вы можете использовать синтаксис for...of для асинхронных запросов. Promise.all выполняет все обещания одновременно. С синтаксисом for..of вы будете выполнять запрос один за другим.

Например

const reqConfigs = [...] // array of request configs. 

for (const conf of reqConfigs) {
    const res = await fetchMyData(conf);
    // handle response...
}

UPD:

Разделить запросы на сегменты. Пример.

// generate request batches somehow. 
const reqConfigs = [...] // request batches configs. 

const fetchBatch = async (conf) => {
   const promises = ... //generate 10 promises
   const batchRes = await Promise.all(promises)
   return batchRes;
}

let allResults = [];

for (const conf of reqConfigs) {
    const batch = await fetchBatch(conf);
    // handle response...
    // Update progress bar... etc. 
    allResults.push(...batch)
}

Answer 2

Справочная информация: Браузеры ограничивают количество одновременных запросов. Например, Chrome имеет ограничение в 6 подключений на имя хоста и максимум 10 подключений.

// Redux actions:
import axios from 'axios';

const LIMIT = 6;

const populateQueue = (requestConfigs) => ({ type: 'POPULATE_QUEUE', payload: requestConfigs });
const popRequest = () => ({ type: 'POP_REQUEST' });

export const initializeQueue = (requestConfigs) => (dispatch) => {
  // Grab as many request as we allow to run concurrently
  const initialRequests = requestConfigs.slice(0, LIMIT);

  // Put the rest in a queue
  const remainingRequests = requestConfigs.slice(LIMIT, requestConfigs.length);
  dispatch(populateQueue(remainingRequests));

  // Start the first batch. When one of requests finishes,
  // it will pop the next from the queue and start it.
  initialRequests.forEach((requestConfig) => dispatch(startRequest(requestConfig)));
};

const startRequest = (requestConfig) => async (dispatch, getState) => {
  try {
    await axios(requestConfig);
    // process response here
  } catch(error) {
    // error handling
  } finally {
    const { queue } = getState().queuedRequests;
    if (queue.length) {
      // Queue not empty yet, start the next request
      const next = queue[0];
      dispatch(popRequest());
      dispatch(startRequest(next));
    }
  }
};

// Reducer:
const initialState = {
  queue: []
};

const queuedRequestReducer = (state = initialState, action) => {
  if (action.type === 'POPULATE_QUEUE') {
    return { queue: action.payload };
  } else if (action.type === 'POP_REQUEST') {
    return { queue: state.queue.slice(1, state.queue.length) };
  }

  return state;
};

export default queuedRequestReducer;

// In the React component this would be triggered with:
<button onClick={() => initializeQueue(requestConfigs)}>fetch a lot of data</button>

Answer 3

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