React-原生Promise.all和多个应用编程接口请求

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

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

  const promises = urls.map(url => fetch(url).then(response => response.json()));

  return Promise.all(promises);
}

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

  useEffect(() => {
    fetchData().then(results => {
      setData(results);
    }).catch(error => {
      console.error('Error fetching data:', error);
    });
  }, []);

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

export default App;

Promise.all(promises)
  .then(results => {
    setData(results);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
    // 可以在这里进行错误处理，例如重试请求或者显示错误信息
  });

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

const promises = urls.map(url => fetchWithTimeout(url).then(response => response.json()));