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

在使用React.js进行前端开发时，可以通过以下步骤在Fetch API中设置超时：

首先，确保你已经安装了React.js，并且在项目中引入了所需的依赖。
创建一个包含异步请求的函数，你可以使用fetch方法来发送请求。示例代码如下：

const fetchData = (url, timeout = 5000) => {
  return new Promise((resolve, reject) => {
    // 创建一个超时定时器
    const timer = setTimeout(() => {
      reject(new Error('请求超时'));
    }, timeout);
    
    fetch(url)
      .then(response => {
        clearTimeout(timer); // 请求成功后清除超时定时器
        resolve(response.json());
      })
      .catch(error => {
        clearTimeout(timer); // 请求失败后清除超时定时器
        reject(error);
      });
  });
};

在你的React组件中使用上述函数来发送异步请求。示例代码如下：

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

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchData('https://api.example.com/data')
      .then(responseData => {
        setData(responseData);
        setIsLoading(false);
      })
      .catch(error => {
        console.error(error);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {data && (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default MyComponent;

在上述代码中，我们创建了一个fetchData函数，该函数接受一个URL和可选的超时时间作为参数。函数返回一个Promise，通过fetch方法发送异步请求，并设置超时定时器。如果请求成功，我们清除定时器并解析响应的JSON数据；如果请求失败，我们也清除定时器并抛出错误。

在React组件中，我们使用useEffect钩子来在组件加载时发送异步请求，并在请求完成后更新组件状态。在加载状态下，我们显示一个加载中的提示信息，加载完成后，我们根据返回的数据渲染列表。

请注意，上述代码只是一个示例，你可以根据自己的需求进行修改和扩展。

推荐的腾讯云相关产品和产品介绍链接地址：