如何使用Javascript来使用GTMetrix Api？

Question

我不熟悉API的用法。我已经成功地通过javascript代码使用了Google Page Insights V.5API，但我永远也不能成功地为GTMetrix做到这一点。似乎与Javascript应用编程接口和GTMetrix相关的唯一信息是到RapidApi网站的链接。我只是希望在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一直是我在学习过程中测试和尝试、突破和构建的救命资源。如果要求不是太高，一把小提琴可以帮助我理清思路。

Answer 1

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

正如by the API docs所指出的，API使用的身份验证是用户名的电子邮件和GTmetrix密钥作为密码。

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

因此，您可以通过您的后端代码来完成此操作。例如，如果通过节点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调用添加基本的authorization header请求，并对其进行正确编码(这就是btoa函数调用所做的工作)。