Question

我想使用gapi从Google访问人的api资源，我尝试了很多方法来完成这项工作，但仍然无法获得任何回应。它没有错误，没有警告。这是我的代码。

loadYoutubeApi() {
    const script = document.createElement("script");
    script.src = "https://apis.google.com/js/client.js";

    script.onload = () => {
      window.gapi.load('client', () => {
        window.gapi.client.setApiKey(types.API_KEY)
        window.gapi.client.setClientId(types.CLIENT_ID)
        window.gapi.client.setDiscoveryDocs(types.DISCOVERY_DOCS)
        window.gapi.client.setScope(types.SCOPE)
        window.gapi.client.load('client:auth2', 'v3', () => {
          console.log("gapi is ready")
          this.setState({ gapiReady: true });
        });
      });
    };

    document.body.appendChild(script);
  }

  componentDidMount() {
    this.loadYoutubeApi();
  }

谁能告诉我为什么我什至无法获得控制台日志信息，它真的有效吗？

更新：

一旦我将这些代码注释掉

window.gapi.client.setClientId(types.CLIENT_ID)
window.gapi.client.setDiscoveryDocs(types.DISCOVERY_DOCS)
window.gapi.client.setScope

我可以获得控制台信息，这与这些方法有关吗？

更新：

我可以获取gapi对象和console.log(window.gapi)来查看其详细信息。

Answer 1

假设您正在使用create-react-app，并且webpack配置了公共HTML文件夹，那么您将需要在其中放置脚本标签。

您可能在某些文本编辑器项目树中看不到公用文件夹，但是会在OS文件浏览器中看到它。只需转到公共文件夹并用以下行编辑index.html：

<script src="https://apis.google.com/js/client.js"></script>

右</head>标记上方。无论如何，您都是使用当前代码间接进行此操作。您可以删除：

 const script = document.createElement("script");
 script.src = "https://apis.google.com/js/client.js";

和onload调用，将所有api对象调用（以窗口为基础对象）都放在componentDidMount()方法中。您不必担心它会被加载，因为您的组件只有在加载完所有内容后才能加载。

此外，不必担心它会降低速度或在需要之前加载脚本。在生产前运行npm run build时，无论如何都会将所有内容压缩为几个文件。

编辑：

您应该将onload的呼叫更改为addEventListener('load', callback);

Answer 2

在我的react项目中尝试添加gapi时遇到很多问题。我发现的所有软件包都已过时，因此我创建了一个新软件包。

gapi-script允许您添加带有以下内容的gapi：

import { gapi } from 'gapi-script'

如何在反应中使用gapi

2 个答案: