javascript - 如何使用 Javascript 使用 GTMetrix Api？

Question

我是 API 使用新手。我已经通过 javascript 代码正确地利用了 Google Page Insights V.5 API，但我一生都无法成功地为 GTMetrix 做到这一点。似乎与 GTMetrix API 和 Javascript 相关的唯一信息是 RapidApi 网站的链接。我只是希望能够像从 Google 一样简单地从 GTMetrix 检索数据。这可能吗？

当我将其设置为:

时，我是否只是错误地构造了我的请求:

https://gtmetrix.com/api/0.1/?login-user=myemail@email.com&login-pass=MyRanDomApIKeY&location=2&url=https://sitetotest.com

因为当我将 Google Page Insights 请求 URL 设置为以下内容时，它会起作用。

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://websitetotest.com&category=performance&strategy=desktop&key=MyRanDomApIKeY

以下代码适用于 Google Page Insights，我什至可以使用如下 URL 在浏览器窗口中检索 JSON 数据:

<div id="firstmetric"></div>
<br>
<div id="domSize"></div>

<button>Click Me</button>

<script>
$('button').click(function(){

var baseUrl = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=";


var fieldUrl = "https://websitetotest.com";
var trailing = "&category=performance&strategy=desktop&key=MyRanDomApIKeY";

$.getJSON(baseUrl + fieldUrl + trailing, function(data){

console.log(data);

var item = data.lighthouseResult.categories.performance.auditRefs[0].weight;
var domSize = data.lighthouseResult.audits['dom-size'].displayValue;



$("#firstmetric").html( item );

$("#domSize").html( domSize );

});

});

我确实需要为我详细说明，因为任何少的内容都会导致我提出后续问题并使我们陷入困境。 :/

作为一名新手，JSFiddle 一直是我在学习过程中进行测试、尝试、突破和构建的救命资源。如果要求不高的话，一把 fiddle 可以帮助我理清思路。

Answer 1

您正在使用的参数:login-user 和 login-pass 指的是您正在分析的页面上的 HTTP 身份验证(如在中，GTmetrix 将在您的分析中传递这些参数)而不是您的 GTmetrix API 凭据。

用于 GTmetrix API 的身份验证是您的电子邮件地址作为用户名，您的 API key 作为密码，如 by the API docs 所指出的那样。 .

要记住的另一件事是 GTmetrix 不允许您通过 Web 应用程序前端进行 API 调用，因为它们不允许 CORS requests 。如果您通过普通网站上的 Web 应用程序执行此操作，则会暴露您的 GTmetrix API key ，这可能不是一个好主意。

因此，您可以通过后端代码来完成此操作。例如，如果通过 Node JavaScript 完成:

fetch("https://gtmetrix.com/api/0.1/locations", {
    headers: new Headers({
        "Authorization": 'Basic ' + btoa("[YOUR E-MAIL]" + ":" +"[YOUR API KEY]"),
    }),
}).then(res => res.json())
.then(response => console.log(response));

会打印出位置数组。

请注意，无论您选择哪种后端代码，您都需要为 API 调用添加基本授权 header 请求并对其进行正确编码(这就是 btoa 函数调用的作用)。