如何使用 Javascript 使用 GTMetrix Api？答案

【问题标题】：How to use GTMetrix Api using Javascript?如何使用 Javascript 使用 GTMetrix Api？
【发布时间】：2019-03-20 05:17:35
【问题描述】：

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

当我将请求设置为：

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

因为当我将我的 Google Page Insights Request URL 设置为以下内容时，它可以工作。

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

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

<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 一直是我学习过程中测试和尝试、打破和构建的救命资源。如果要求不高的话，提琴可以帮助我解决问题。

【问题讨论】：

标签： javascript api gtmetrix

【解决方案1】：

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

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

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

因此，您将通过您的后端代码执行此操作。例如，如果通过 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 调用添加基本授权标头请求并对其进行正确编码（这就是 btoa 函数调用所做的事情）。

【讨论】：