如何使用react js在Fetch API中设置超时

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    const fetchDataWithTimeout = (url, options, timeout = 5000) => {
      return Promise.race([
        fetch(url, options),
        new Promise((_, reject) =>
          setTimeout(() => reject(new Error('请求超时')), timeout)
        )
      ]);
    };

    const fetchUrl = 'https://api.example.com/data';
    const requestOptions = {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' }
    };

    fetchDataWithTimeout(fetchUrl, requestOptions)
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应错误');
        }
        return response.json();
      })
      .then(data => console.log(data))
      .catch(error => console.error('发生错误:', error));
  }, []);

  return <div>正在加载数据...</div>;
}

export default App;