fetchData is not defined. 请详细解释并给出多段修复代码示例，尽量长一些。

🔍 错误分析

1. 🌐 错误翻译

原文：ReferenceError: fetchData is not defined
译文：引用错误：fetchData 未定义

2. 🎯 原因分析

该错误的核心原因是试图调用一个未被定义的变量或函数。fetchData 在代码执行时不存在于任何作用域中，可能的情况包括：

• 函数未声明：直接调用了名为 fetchData 的函数，但从未使用 function fetchData() 或 const fetchData = ... 进行定义。


• 变量未声明：将 fetchData 当作变量使用，但未使用 let、const 或 var 声明。


• 作用域问题：在错误的作用域内调用 fetchData，例如函数内部调用了外部作用域未定义的标识符。


• 拼写错误：函数/变量名称拼写错误，导致实际名称与调用名称不一致。


• 引入缺失：依赖外部模块或库的函数，却未正确导入。


• 加载顺序问题：在脚本加载完成前调用函数，例如在 <script> 标签之前调用了后续才定义的函数。

3. 💡 多场景解决方案与代码示例

以下分不同场景给出修复方案，涵盖实际开发中常见情况：

#### 场景1：直接调用未声明的函数（最基础的修复）
最常见的情况是在代码中直接调用未定义的函数，例如：

错误代码：

// 未定义 fetchData，直接调用
fetchData('https://api.example.com/data');

修复后代码：

// 方案1：使用函数声明（提升作用域，可在声明前调用）
function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      console.error('fetchData 请求出错：', error);
      throw error; // 可选：重新抛出错误，由上层处理
    });
}

// 正常调用（函数声明会被提升，此处调用合法）
fetchData('https://api.example.com/data')
  .then(data => console.log('获取的数据：', data))
  .catch(err => console.error('处理失败：', err));

// 方案2：使用函数表达式（需先定义后调用，适合箭头函数或普通函数）
const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('fetchData 异步请求出错：', error);
    throw error;
  }
};

// 调用（必须在赋值之后）
fetchData('https://api.example.com/data')
  .then(data => console.log('异步获取的数据：', data))
  .catch(err => console.error('异步处理失败：', err));

####