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

问题描述

在前端开发中，使用 fetch() API 进行数据请求已经是很常见的了。但是在使用 ESLint 进行代码检查的时候，可能会遇到 'fetch' is not defined 的报错，如下所示：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))

报错信息：

error  'fetch' is not defined  no-undef

这个错误提示的意思是当前代码中找不到 fetch 对象，因此会认为它是一个未定义的变量。

解决方案

1. 在 ESLint 配置文件中添加全局变量

ESLint 提供了一个 globals 配置项，用来指定全局变量。我们可以在 .eslintrc 或 .eslintrc.js 文件中添加以下内容：

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

这样 ESLint 就会知道 fetch 是一个全局变量，并且不会误报错误。

2. 在代码文件中引入 polyfill

如果你的代码运行环境不支持 fetch API，那么你需要在代码文件中引入 fetch 的 polyfill。polyfill 是一种代码补丁，可以填补浏览器缺少的特性。

我们可以使用 whatwg-fetch 库来提供 fetch 的 polyfill。在代码文件的头部添加以下代码：

import 'whatwg-fetch';

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))

这样 ESLint 就能够正确识别 fetch 对象，并且不会误报错误。

另外，如果你使用的是 Node.js 环境而不是浏览器环境，那么你需要使用 node-fetch 库来提供 fetch 的 polyfill。

示例代码

/* eslint-env es6 */
/* eslint-disable no-console */

import 'whatwg-fetch';

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

总结

在前端开发中使用 fetch() API 已经很常见了，但是 ESLint 报错却让我们有些无从下手。针对 'fetch' is not defined 这个错误提示，我们可以通过添加全局变量或者引入 polyfill 来解决。同时，在实践中，我们应该根据项目需要来选择合适的解决方案。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654de9987d4982a6eb746a5f