react本机中的Fetch() api失败-“未处理的promise rejection”

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();
  })
  .then(data => {
    // 处理请求成功的数据
  })
  .catch(error => {
    // 处理请求失败的情况
    console.error(error);
  });

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('请求失败');
    }
    const data = await response.json();
    // 处理请求成功的数据
  } catch (error) {
    // 处理请求失败的情况
    console.error(error);
  }
}

fetchData();

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const abortController = new AbortController();

    fetch('https://api.example.com/data', { signal: abortController.signal })
      .then(response => {
        if (!response.ok) {
          throw new Error('请求失败');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
      })
      .catch(error => {
        console.error(error);
      });

    return () => {
      abortController.abort(); // 在组件卸载时取消请求
    };
  }, []);

  // 渲染组件
}