API 无法处理我的请求，因为模板文字使 API 动态化

Question

对于一个学校项目，我必须制作一个测验应用程序。它可以选择一个难度，一个类别和所需问题的数量。api是一个url，可以通过更改一些值来轻松修改。例如:https://quizapi.io/api/v1/questions?apiKey=MYAPIKEY&limit=15&difficulty=hard&category=cms。如果你只是将php更改为url中的代码，你将获得最多15个关于HTML和CSS的困难问题。我想你已经明白这是怎么回事了。

然而。我已经设置了我的代码，难度，类别和金额存储在本地存储，当测试开始时，它们被获取。目前，我得到了我想要的问题的数量，但我不能改变我的难度或类别，因为可能模板字面量不工作在取回api..也许有人可以给我一个想法，或者也许我在我当前的代码中犯了一个错误

let storageDif = localStorage.getItem("mD");
console.log(storageDif.toString());
let storageCat = localStorage.getItem("mC");
console.log(storageCat);
let geslideVragen = localStorage.getItem("slider");
let MAX_VRAGEN = geslideVragen;
console.log(MAX_VRAGEN);
let vragen = [];
fetch(`https://quizapi.io/api/v1/questions?apiKey=kAFKilHLeEcfLkGE2H0Ia9uTIp1rYHDTIYIHs9qf&limit=15&difficulty=hard&category=${storageCat}`)
.then((res) => {
return res.json();
})
.then((loadedQuestions) => {
for (let i = 0; i < MAX_VRAGEN; i++) {
vragen = loadedQuestions;
console.log(vragen[i].question);
};
startGame();
})
.catch( err => {
console.error(err);
});

Answer 1

我相信您现在已经发现您只是在插入类别。要使其正确，您需要这样做:

`https://quizapi.io/api/v1/questions?apiKey=kAFKilHLeEcfLkGE2H0Ia9uTIp1rYHDTIYIHs9qf&limit=${MAX_VRAGEN}&difficulty=${storageDif}&category=${storageCat}`

也就是说，你永远不应该以这种方式暴露你的API密钥，因为特别是对于云服务，如果有人决定为了自己的目的而使用它，它很容易在一天内花费你超过5位数。有很多抓取器会在GitHub上搜索暴露的API密钥是否被非法使用。

此外，应该应用检查来确保使用if()语句的所有值都存在，以便在值未定义时不获取任何内容。