在ReactJS中进行并行异步等待调用

import React, { useEffect, useState } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const urls = [
          'https://api.example.com/data1',
          'https://api.example.com/data2',
          'https://api.example.com/data3'
        ];

        const promises = urls.map(url => fetch(url));
        const responses = await Promise.all(promises);

        const results = await Promise.all(responses.map(response => response.json()));
        setData(results);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>{JSON.stringify(item)}</div>
      ))}
    </div>
  );
}

export default App;

try {
  const results = await Promise.all(promises.map(p => p.catch(e => null)));
} catch (error) {
  console.error('Error:', error);
}

const fetchWithTimeout = (url, options, timeout = 5000) => {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Request timed out')), timeout)
    )
  ]);
};