如何在react中使用gapi

IT技术 javascript reactjs google-api google-api-js-client
2021-05-06 16:00:40

我想使用gapi从谷歌访问人们的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)查看其详细信息。

2个回答

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

gapi-script允许您添加 gapi:

import { gapi } from 'gapi-script'

假设您正在使用create-react-appwebpack配置了一个公共 HTML 文件夹,那么您需要在那里放置脚本标记。

您可能不会在某些文本编辑器项目树中看到您的公共文件夹,但您会在您的操作系统文件浏览器中看到它。只需转到公共文件夹并使用以下行编辑 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 对象调用(以 window 作为基础对象)放在您的componentDidMount()方法中。您不必担心它会被加载,因为您的组件只能在加载完所有内容后才能安装。

此外,不要担心它会减慢任何东西的速度或在您需要之前加载脚本。当您npm run build在生产之前运行时,您无论如何都会将所有内容压缩为几个文件。

编辑:

你应该改变你的onload电话addEventListener('load', callback);