ESLint 报错：'fetch' is not defined-JavaScript中文网-JavaScript教程资源分享门户

当你在使用 ESLint 进行代码检查时，可能会遇到这个错误：'fetch' is not defined。这个错误通常出现在你使用了 fetch API 但是 ESLint 不认识它的情况下。

什么是 fetch API

fetch API 是浏览器提供的一种用于发起网络请求的接口。它可以替代原本的 XMLHttpRequest（XHR）对象，提供了更加简单和强大的方式来发起网络请求。

fetch API 的基本用法如下：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

其中，fetch 函数会返回一个 Promise 对象，我们可以通过 then 方法来处理异步操作的结果。

为什么会出现 ESLint 报错

ESLint 是一种代码检查工具，它可以帮助我们自动检查代码中的问题，比如语法错误、代码风格不规范等。当我们使用了 ESLint 进行代码检查时，它会检查我们代码中的每一行，如果遇到了它不认识的方法或变量，就会出现类似于 'fetch' is not defined 的错误。

这是因为 ESLint 默认情况下只认识一些基本的 JavaScript 方法和变量，而并不认识一些浏览器提供的特殊方法和变量，比如 fetch API。

如何解决 ESLint 报错

为了解决这个问题，我们需要告诉 ESLint 我们所使用的变量和方法。可以使用 ESLint 的全局变量配置来告诉它我们使用了哪些全局变量。具体方法如下：

在项目根目录下创建一个名为 .eslintrc.json 的文件。
在 .eslintrc.json 中添加以下代码：

{
  "globals": {
    "fetch": "readonly"
  }
}

上面的代码告诉 ESLint，我们使用了 fetch 方法，并且 fetch 方法是只读的。这样 ESLint 就不会再把 'fetch' is not defined 当作错误了。

示例代码

下面是一个使用了 fetch API 的示例代码：

fetch('https://api.github.com/users/github')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

如果你没有进行全局变量配置，那么 ESLint 会抛出 'fetch' is not defined 的错误。但如果你按照上面的步骤进行了配置，那么 ESLint 就不会再抛出这个错误了。

总结

在前端开发中，我们经常会使用一些浏览器提供的特殊方法和变量，比如 fetch API。但是在使用 ESLint 进行代码检查时，可能会出现 'fetch' is not defined 的错误。为了解决这个问题，我们可以使用 ESLint 的全局变量配置来告诉它我们所使用的变量和方法。这样可以让我们的代码更加规范和可维护。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65bda507add4f0e0ff752bc3