Javascript 在react redux应用程序中处理大量http请求

我需要一些关于react redux应用程序项目的帮助。我有一些巨大的数据，我把它们分割成小文件，用户可以选择开始和结束时间范围。当用户按下“获取数据”按钮时，我创建http请求承诺对象并将其推入数组，然后等待所有请求使用promise.all（）完成。它适用于小时间范围，但如果用户选择大时间范围，则我可以看到应用程序中的延迟。我在chrome开发者工具中看到了50多个HTTP请求。我想知道在react redux应用程序中处理大量请求的最佳方法是什么？

使服务器端端点在从react发送的http头中的范围内，在单个请求中给出所有结果。这将减少您的请求数量，使您的应用程序更直观。

使服务器端端点在从react发送的http头中的范围内，在单个请求中给出所有结果。这将减少您的请求数量，使您的应用程序更直观。

您可以为异步请求使用

for…of

语法<代码>承诺。所有同时运行所有承诺。使用

for..of

语法，您将逐个执行请求

比如说

const reqConfigs=[…]//请求配置数组。
用于（需求配置的常量配置）{
const res=await fetchMyData（conf）；
//处理响应。。。
}

UPD：

将请求拆分为多个存储桶。例如

//以某种方式生成请求批。
const reqConfigs=[…]//请求批配置。
const fetchBatch=async（conf）=>{
常量承诺=…//生成10个承诺
const batchRes=等待承诺。全部（承诺）
返回batchRes；
}
让allResults=[]；
用于（需求配置的常量配置）{
const batch=await fetchBatch（conf）；
//处理响应。。。
//更新进度条…等等。
allResults.push（…批处理）
}

您可以对异步请求使用

for…of

语法<代码>承诺。所有同时运行所有承诺。使用

for..of

语法，您将逐个执行请求

比如说

const reqConfigs=[…]//请求配置数组。
用于（需求配置的常量配置）{
const res=await fetchMyData（conf）；
//处理响应。。。
}

UPD：

将请求拆分为多个存储桶。例如

//以某种方式生成请求批。
const reqConfigs=[…]//请求批配置。
const fetchBatch=async（conf）=>{
常量承诺=…//生成10个承诺
const batchRes=等待承诺。全部（承诺）
返回batchRes；
}
让allResults=[]；
用于（需求配置的常量配置）{
const batch=await fetchBatch（conf）；
//处理响应。。。
//更新进度条…等等。
allResults.push（…批处理）
}

背景信息：浏览器限制并发请求。例如，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>

//重复操作：
从“axios”导入axios；
常数极限=6；
常量populateQueue=（requestConfigs）=>（{type:'POPULATE_QUEUE'，负载：requestConfigs}）；
const popRequest=（）=>（{type:'POP_REQUEST'}）；
导出常量初始化equeue=（请求配置）=>（分派）=>{
//获取尽可能多的请求以允许并发运行
const initialRequests=requestConfigs.slice（0，限制）；
//让其余的人排队
const remainingRequests=requestConfigs.slice（LIMIT，requestConfigs.length）；
调度（populateQueue（remainingRequests））；
//开始第一批。当其中一个请求完成时，
//它将从队列中弹出下一个并启动它。
initialRequests.forEach（（requestConfig）=>dispatch（startRequest（requestConfig））；
};
const startRequest=（requestConfig）=>async（dispatch，getState）=>{
试一试{
等待axios（requestConfig）；
//在此处理响应
}捕获（错误）{
//错误处理
}最后{
const{queue}=getState（）.queuedRequests；
if（队列长度）{
//队列尚未为空，启动下一个请求
const next=队列[0]；
调度（popRequest（））；
调度（startRequest（下一个））；
}
}
};
//减速器：
常量初始状态={
队列：[]
};
常量queuedRequestReducer=（状态=初始状态，操作）=>{
if（action.type===“填充队列”）{
返回{queue:action.payload}；
}else if（action.type==='POP_REQUEST'）{
返回{queue:state.queue.slice（1，state.queue.length）}；
}
返回状态；
};
导出默认queuedRequestReducer；
//在React组件中，这将通过以下方式触发：
initializeQueue（requestConfigs）}>获取大量数据

背景信息：浏览器限制并发请求。例如，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>

//重复操作：
从“axios”导入axios；
常数极限=6；
常量populateQueue=（requestConfigs）=>（{type:'POPULATE_QUEUE'，负载：requestConfigs}）；
const popRequest=（）=>（{type:'POP_REQUEST'}）；
导出常量初始化equeue=（请求配置）=>（分派）=>{
//获取尽可能多的请求以允许并发运行
const initialRequests=requestConfigs.slice（0，限制）；
//让其余的人排队
const remainingRequests=requestConfigs.slice（LIMIT，requestConfigs.length）；
调度（populateQueue（remainingRequests））；
//开始第一批。当其中一个请求完成时，
//它将从队列中弹出下一个并启动它。
initialRequests.forEach（（requestConfig）=>dispatch（startRequest（requestConfig））；
};
const startRequest=（requestConfig）=>async（dispatch，getState）=>{
试一试{
等待axios（requestConfig）；
//在此处理响应
}捕获（错误）{
//错误处理
}最后{
const{queue}=getState（）.queuedRequests；
if（队列长度）{
//队列尚未为空，启动下一个请求
const next=队列[0]；