如何使用Promise.all处理成千上万的请求

如何解决如何使用Promise.all处理成千上万的请求

在我的React应用程序中，我有一个将请求发送到在线服务的组件，该组件最多可以处理50个请求。我现在收到一个执行7000个MAC的新请求。

function App() {
const [data,setData] = useState([]);

useEffect(() => {
     const fetchData = async () => {
        await axios.all([
             axios.get("/ipdn/<MAC ADDRESS>",{ timeout: 10000 }),axios.get("/ipdn/<MAC ADDRESS>",{ timeout: 10000 })
       // Adding all the mac address ....... 
        ]).then((responseArr) => {
            setData(responseArr)
        });
     };
    fetchData();
},[]);

我想扩展fetchData函数，以便基本上只发送50个IP，并且要等到迭代完成为止。

迭代完成后，将执行下一个50。

谢谢

解决方法

以下是无需任何外部库即可完成的操作：

git fetch

我在这里使用生成器const ips = [ /* List of mac address. */ ]; useEffect(() => { const fetchData = async () => { const loadedData = []; // Iterate over the slices of array until all the ips have been processed. for (const sliceIps of sliceGenerator(ips)) { const gettingData = sliceIps.map(getDataFromIp); const sliceLoadedData = await axios.all(gettingData); loadedData = loadedData.concat(sliceLoadedData); } setData(loadedData); }; fetchData(); },[]); const getDataFromIp = (ip) => axios.get("/ipdn/<MAC ADDRESS>",{ timeout: 10000 }); // Generates a slice of an array,here the slice has a size of 50 max. function* sliceGenerator(arr) { const sliceSize = 50; let i = 0; while (i < arr.length) { yield arr.splice(i,i + sliceSize); i += sliceSize; } } 来生成ips数组的切片。这样，您可以按50乘50批量处理它们。

我也在使用function* sliceGenerator循环。这非常方便，因为您可以在内部使用for (... of ...)关键字。

,

没有库，您可以使用此功能：

function poolPromises(iterPromises,poolSize) {
    return new Promise((resolve,reject) => {
        let promises = [];
        function nextPromise() {
            let { value,done } = iterPromises.next();
            if (done) {
                resolve(Promise.all(promises));
            } else {
                promises.push(value); // value is a promise
                value.then(nextPromise,reject);
            }
            return !done;
        }
        
        while (promises.length < poolSize && nextPromise()) { }
    });
}

此函数将接受迭代器的承诺，直至池的大小。每当一个承诺解决时，它将从迭代器获得下一个承诺，因此池将再次完成。因此，在生成下一个承诺之前，不必完全清空池。现货免费后，它将再次使用。

重要的是，迭代器仅在通过next()方法从中拉出下一个诺言时才创建下一个诺言。

在您的用例中，您可以按以下方式调用它：

const fetchData = async () => {
    function * iterRequests() {
        for (let macAddress of macAddresses) {
            yield axios.get("/ipdn/" + macAddress,{ timeout: 10000 });
        }
    }
    return poolPromises(iterRequests(),50).then(setData);
}    

注意：fetchData不必声明为async，因为其中没有await。

,

如果您在使用外部库时没有任何问题，可以使用es6-promise-pool来管理并发请求，如下所示：

import PromisePool from 'es6-promise-pool';


// macs - Array of mac addresses
useEffect(() => {
  const fetchData = async () => {
    const results = [];
    const generatePromises = function*() {
      for (let count = 0; count < macs.length; count++) {
        yield axios.get(`/ipdn/${macs[count]}`,...);
      }
    }
    const promiseIterator = generatePromises();
    // Create a pool with 10 concurrent requests max
    const pool = new PromisePool(
      promiseIterator,10 // Configurable
    );
    // To listen to result
    pool.addEventListener('fulfilled',function (event) {
      console.log('Fulfilled: ' + event.data.result);
      results.push(event.data.result);
    });
    // Start the pool
    pool.start().then(function () {
      setData(results);
      console.log('Complete');
    });
  };
  fetchData();
},[]);

,

我对axios.all不熟悉，因此我提供了一种仅使用Promise.all的方法。我的想法是将输入数组拆分为每个块50个地址，然后一个个地解决它

function App() {
  const [data,setData] = useState([]);

  useEffect(() => {
    // helper function,split array to chunked array
    const splitToChunks = (items,chunkSize = 50) => {
      const result = [];
      for (let i = 0; i < items.length; i += chunkSize) {
        result.push(items.slice(i,i + chunkSize));
      }
      return result;
    }
    
    const fetchData = async () => {
      const result = []; // init value
      const macAddresses = []; // array of mac addresses - your mac addresses
    
      const chunkedArray = splitToChunks(macAddresses); // return array of array [[...50 mac adds],[],[]]
    
      for (const macs of chunkedArray) { // now macs is [...50 mac adds]
        const promises = macs.map((mac) => {
          return axios.get(`/ipdn/${mac}`,{ timeout: 10000 });
        });
        // now promises is array contains 50 Promises
        const response = await Promise.all(promises); // wait until finish 50 requests
        result.push(...response); // copy response to result,and continue for next block
      }
    
      setData(result);
    };
    fetchData();
  },[]);
}