TypeError:无法对‘Window’执行'fetch‘：无效值

问题分析

TypeError: 无法对‘Window’执行'fetch‘：无效值 这个错误通常表示在尝试使用 fetch API 时，当前的 Window 对象不是预期的全局对象，或者 fetch API 未被正确加载。

基础概念

fetch 是一个用于访问和操纵 HTTP 管道的 JavaScript API，它提供了一种简单、合理的方式来跨网络异步获取（或发送）资源。fetch 返回一个 Promise，该 Promise 解析为 Response 对象。

可能的原因

环境问题：当前环境不支持 fetch API，例如在某些旧版本的浏览器或 Node.js 环境中。
模块化问题：如果你在使用模块化 JavaScript（如 ES6 模块），可能需要导入 fetch API。
全局对象问题：当前的全局对象不是 Window，例如在某些框架或库中。

解决方案

1. 检查环境支持

首先，确保你的环境支持 fetch API。大多数现代浏览器都支持 fetch，但一些旧版本可能不支持。你可以使用以下代码检查是否支持 fetch：

if (typeof fetch !== 'function') {
  console.error('Fetch API is not supported in this environment');
}

2. 使用 Polyfill

如果环境不支持 fetch，可以使用 polyfill 来提供 fetch 功能。一个常用的 polyfill 是 whatwg-fetch。你可以通过 npm 安装并导入它：

npm install whatwg-fetch

然后在你的代码中导入：

import 'whatwg-fetch';

3. 检查全局对象

确保当前的全局对象是 Window。如果你在使用某些框架或库，可能需要手动设置全局对象。例如，在 Node.js 环境中，你可以这样做：

global.fetch = require('node-fetch');

4. 示例代码

以下是一个完整的示例，展示了如何在浏览器环境中使用 fetch API：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fetch Example</title>
</head>
<body>
  <script>
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  </script>
</body>
</html>