GAPI 未定义 - Svelte3

Question

我在尝试在我的 Svelte 应用中实施 Youtube 数据时遇到问题 API。每当加载站点时，它只会吐出以下错误： Uncaught ReferenceError: gapi is not defined

目前相关代码如下：


<svelte:head>
    <script src="https://apis.google.com/js/api.js"></script>
    
</svelte:head>
<script>
    
function start() {
  console.log(GAPIKEY);
  // 2. Initialize the JavaScript client library.
  gapi.client.init({
    'apiKey': GAPIKEY,
  }).then(function() {
    // 3. Initialize and make the API request.
    return gapi.client.request({
      'path': 'https://www.googleapis.com/youtube/v3/playlists',
      'id': 'PLy3-VH7qrUZ5IVq_lISnoccVIYZCMvi-8'
    })
  }).then(function(response) {
    console.log(response.result);
  }, function(reason) {
    console.log('Error: ' + reason.result.error.message);
  });
};

gapi.load('client', start);
</script>

从我从其他类似的 Whosebug 帖子中可以看出，这似乎与在脚本标签中使用 async 和 defer 有关，导致 gapi 在代码之前未加载运行。但是，由于我使用的是 Svelte，它似乎会自动将它们添加到编译代码中，所以我不确定应该如何解决这个问题？

感谢任何帮助！

Answer 1

将 <script src="https://apis.google.com/js/api.js"></script> 添加到 public 文件夹中的 index.html，而不是将其加载到 <svelte:head>

GAPI 未定义 - Svelte3

GAPI is not defined - Svelte3

javascript

google-api-js-client

svelte

svelte-3