ESLint 报告 'fetch' is not defined
在前端开发中，我们经常会遇到 ESLint 报告 'fetch' is not defined 这样的错误。这个错误通常出现在使用了 fetch 方法后，ESLint 提示无法识别 fetch 方法。出现这个问题的原因是，fetch 方法并不是所有浏览器都支持，需要使用 polyfill 进行兼容处理。本文将对这个问题进行深入分析，并提供解决方案。
一、什么是 fetch 方法？
在了解 fetch 方法之前，需要先了解 XMLHttpRequest（即 AJAX）。
XMLHttpRequest 是一种用于在浏览器和服务器之间传输数据的技术。它是一种异步数据传输方式，以便不必刷新整个页面即可更新部分页面内容。但是，XMLHttpRequest 不易于使用，容易出错，而且代码也比较冗长。
fetch 方法是浏览器提供的新一代获取数据的方式，它完全替代了 XMLHttpRequest。fetch 方法使用起来简单方便，支持 Promise，语法清晰易懂，可以轻松处理跨域请求等，所以越来越受到前端开发人员的青睐。
二、为什么会出现 'fetch' is not defined 的错误？
fetch 方法是浏览器提供的方法，但并不是所有浏览器都支持该方法，对于不支持的浏览器，需要使用 polyfill 进行兼容处理，否则会出现 ESLint 报告 'fetch' is not defined 的错误。
三、如何解决 'fetch' is not defined 的错误？
解决 'fetch' is not defined 的错误，需要使用 polyfill 进行兼容处理。Polyfill 是一种能力检测并在浏览器原生不支持的情况下模拟其功能的解决方案。
下面是一个使用 fetch 方法的示例代码：
fetch('https://api.github.com/users')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));如果在不支持 fetch 方法的浏览器上运行代码，会出现 'fetch' is not defined 的错误。我们可以通过添加一个 polyfill，来解决该问题。
在项目中安装 polyfill：
npm install whatwg-fetch --save-dev
然后在需要使用 fetch 方法的文件中，引入 polyfill：
import 'whatwg-fetch';
或者在 HTML 文件中添加以下 script 标签：
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
引入 polyfill 后，就可以在不支持 fetch 方法的浏览器上正常运行上述示例代码，而不会再出现 'fetch' is not defined 的错误了。
四、总结
在本文中，我们了解了 fetch 方法和它出现 'fetch' is not defined 的错误，以及解决该错误的方法。相信通过学习本文，你已经掌握了如何使用 fetch 方法进行数据的获取，并解决了与其相关的错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b3e1daadd4f0e0ffcdd7e2