为何在ES6中无法将常量命名为fetch？

嘿，这绝对是新手刚接触JavaScript时很容易踩的一个坑！我来给你拆解一下问题出在哪：

核心问题：变量作用域导致的名称冲突 #

你自己声明的export const fetch覆盖了浏览器（或Node.js环境）提供的全局fetch函数。当你在这个async函数内部调用fetch(url, options)时，JavaScript引擎会优先使用当前作用域里的fetch——也就是你自己写的这个函数，而不是全局的原生fetch。这就造成了无限递归调用：你的函数一直在调用自己，根本没机会去发起真正的网络请求，自然无法正常工作。

关于你问的“每个声明对编译器而言都是唯一的吗？” #

其实不是“每个声明都是唯一”，而是JavaScript的作用域链规则在起作用：

• 当你访问一个变量时，JS引擎会从当前作用域开始，沿着作用域链向上查找，直到找到第一个匹配的变量为止。
• 你在模块作用域（因为用了export）声明了fetch，所以这个作用域内的所有代码（包括你的async函数内部）访问fetch时，都会优先使用你声明的这个变量，而不会去全局作用域找原生的fetch。

解决方案 #

方案1：给你的函数换个独特的名字（推荐） #

这是最稳妥的做法，完全避免名称冲突：

export const customFetch = async (url, method) => {
  const options = { 
    method: method, 
    headers: { 'Content-Type': 'application/json' } 
  };
  try {
    const response = await fetch(url, options); // 现在调用的是全局原生fetch
    return response.json();
  } catch (e) {
    throw e;
  }
};

方案2：明确访问全局的fetch（仅限浏览器环境） #

如果你非要用fetch这个名字，可以通过window.fetch来强制调用全局的原生fetch，但这种写法在Node.js等非浏览器环境会失效：

export const fetch = async (url, method) => {
  const options = { 
    method: method, 
    headers: { 'Content-Type': 'application/json' } 
  };
  try {
    const response = await window.fetch(url, options); // 明确指定全局fetch
    return response.json();
  } catch (e) {
    throw e;
  }
};

下次遇到类似问题，先检查一下是不是自己的变量名和全局API、上层作用域的变量重名啦😉

内容的提问来源于stack exchange，提问作者hwe