当前位置：文江博客话题详情

如何将Google API客户端库用于JavaScript（GAPI）与异步/等待？

发布于 2025-01-29 13:50:52 字数 2045 浏览 1 评论 0 原文

所有官方代码示例都使用了复杂的回调混乱。相反，我想使用异步/等待它实现它。

I found

根据教程，我将其放在我的＆lt; head＆gt; 我的 index.template.html ：

<!DOCTYPE html>
<html>
  <head>
    <script
      async
      defer
      src="https://apis.google.com/js/api.js"
      onload="window.gapiLoaded()"
      onerror="window.gapiLoadError(event)"
    ></script>
  </head>
  <body>
    <div id="q-app"></div>
  </body>
</html>

然后，我将教程的其他部分组合到我自己的 load> load> load> load> load> load> 函数。它放置在VUE组合中，并在单个文件组件（SFC）中调用：

export const loadGooglePeopleApi = async (accessToken: string) => {
  // Wait for the defered gapi script tag to finish loading
  await new Promise((res, rej) => {
    window.gapiLoaded = res;
    window.gapiLoadError = rej;
  });
  // Load Google API Client Library (aka gapi)
  await new Promise((res, rej) => {
    gapi.load('client', { callback: res, onerror: rej });
  });
  // Load an interface for the Google People API
  await gapi.client.load('https://people.googleapis.com/$discovery/rest');
  // Set the access_token
  gapi.client.setToken({ access_token: accessToken });
};

不幸的是，它会产生某些打字稿错误，因为这些类型在> window >：

Property 'gapiLoaded' does not exist on type 'Window & typeof globalThis'. ts(2339)
Property 'gapiLoadError' does not exist on type 'Window & typeof globalThis'. ts(2339)

所以我添加了类似的类型：

declare global {
  interface Window {
    gapiLoaded?: (value: unknown) => void;
    gapiLoadError?: (reason?: any) => void;
  }
}

但是现在，每当页面加载时，我都会在控制台中遇到此错误：

Uncaught TypeError: window.gapiLoaded is not a function

我是否正确实现了此错误？为什么我会出现控制台错误？

原文

I have a Vue 3 / Quasar / TypeScript app that is using the Google API Client Library for JavaScript (also known as gapi).

All the official code examples use a convoluted mess of callbacks. Instead, I want to implement it using async/await.

I found this tutorial which has given me a head start. But I'm struggling to implement it.

As per the tutorial I put this in the <head> of my index.template.html:

<!DOCTYPE html>
<html>
  <head>
    <script
      async
      defer
      src="https://apis.google.com/js/api.js"
      onload="window.gapiLoaded()"
      onerror="window.gapiLoadError(event)"
    ></script>
  </head>
  <body>
    <div id="q-app"></div>
  </body>
</html>

I then combine other parts of the tutorial into my own loadGooglePeopleApi function. This is placed inside a Vue composable, and called within a single file component (SFC):

export const loadGooglePeopleApi = async (accessToken: string) => {
  // Wait for the defered gapi script tag to finish loading
  await new Promise((res, rej) => {
    window.gapiLoaded = res;
    window.gapiLoadError = rej;
  });
  // Load Google API Client Library (aka gapi)
  await new Promise((res, rej) => {
    gapi.load('client', { callback: res, onerror: rej });
  });
  // Load an interface for the Google People API
  await gapi.client.load('https://people.googleapis.com/$discovery/rest');
  // Set the access_token
  gapi.client.setToken({ access_token: accessToken });
};

Unfortunatley it produces some TypeScript errors because those types do not exist on window:

Property 'gapiLoaded' does not exist on type 'Window & typeof globalThis'. ts(2339)
Property 'gapiLoadError' does not exist on type 'Window & typeof globalThis'. ts(2339)

So I added the types like so:

declare global {
  interface Window {
    gapiLoaded?: (value: unknown) => void;
    gapiLoadError?: (reason?: any) => void;
  }
}

But now I am getting this error in the console whenever the page loads:

Uncaught TypeError: window.gapiLoaded is not a function

Am I implementing this correctly? Why do I get the console error?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

关于作者

栀子花开つ

暂无简介

文章

26 人气

关注发私信

佚名

文章 0 评论 0

关注

今天

文章 0 评论 0

关注

゛时过境迁

文章 0 评论 0

关注

达拉崩吧

文章 0 评论 0

关注

呆萌少年

文章 0 评论 0

关注

孤者何惧

文章 0 评论 0

友情链接

文江博客

如何将Google API客户端库用于JavaScript（GAPI）与异步/等待？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

关于作者

相关话题

热门标签

推荐作者

佚名

今天

゛时过境迁

达拉崩吧

呆萌少年

孤者何惧

友情链接

如何将Google API客户端库用于JavaScript（GAPI）与异步/等待？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

关于作者

相关话题

热门标签

推荐作者

佚名

今天

゛时过境迁

达拉崩吧

呆萌少年

孤者何惧

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。