如何在 Javascript 中使用 API 密钥？答案

【问题标题】：How to use the API key in Javascript?如何在 Javascript 中使用 API 密钥？
【发布时间】：2022-03-02 05:02:30
【问题描述】：

我一直试图弄清楚如何使用this API，但我不确定需要“使用您的个人 API 密钥填充 TRN-Api-Key 标头”意味着什么。我将在哪里执行此操作以从 API 获取结果？如果我只是尝试在我的浏览器中填写所有内容的 API url 它不会给我响应，因为我需要 API 密钥，但我不能把它放在 URL 中（至少它没有说明任何内容如何/在哪里放置）。所以我只是想知道如何输入 API 密钥以便让我看到结果？谢谢你:)

这是我尝试使用的 API：http://docs.trnbattlefield.apiary.io/#

顺便说一句，我正在尝试使用 HTML 和 Javascript / jQuery 来做到这一点。

【问题讨论】：

查看 jQuery ajax documentation 中的 headers 部分以发送 TRN-Api-Key 标头。

标签： javascript api

【解决方案1】：

您可以使用他们网站上的 BF1 Tracker 代码示例，并且有许多不同语言的示例。正如你所问的关于 jQuery 的问题，我直接从 trnbattlefield 复制了代码并添加了 api-key。

var request = new XMLHttpRequest();

request.open('GET', 'https://battlefieldtracker.com/bf1/api/Stats/BasicStats?
platform=3&personaId=xxxxxxxxxx&game=tunguska');

request.setRequestHeader('TRN-Api-Key', 'xxxxxxxxxxxxxxxx');

request.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log('Status:', this.status);
    console.log('Headers:', this.getAllResponseHeaders());
    console.log('Body:', this.responseText);
  }
};

request.send();

注意，这是使用 'DetailedStats' api。

【讨论】：

【解决方案2】：

您可以使用 jQuery 的 .ajax() 而不是 .get()，它只是 .ajax() 的一个薄包装。 .ajax() 为您提供了一个可选的 headers 参数，您可以在其中添加自定义标头，例如带有您个人 API 密钥的标头。标头不是 URL 地址本身的一部分。

http://api.jquery.com/jQuery.ajax/

【讨论】：