Quiz应用调用Fetch API时模板字面量失效无法修改题目难度与分类如何解决

问题排查 #

• 难度参数硬编码未使用存储值：代码中已经从localStorage读取了难度值到storageDif变量，但fetch请求的URL里difficulty参数仍然写死为hard，自然不会随用户选择变化。
• 分类参数缺少空值兜底：如果localStorage内mC对应的值不存在/为空，拼接后URL里会出现category=null，导致接口返回不符合预期的结果。
• 题目数量参数未同步到接口请求：接口的limit参数写死为15，没有使用用户选择的MAX_VRAGEN，如果用户选择的题目数量超过15，最多也只能拿到15道题。
• localStorage读取的值类型未转换：从localStorage读取的数值都是字符串格式，题目数量建议显式转成数字类型，避免后续逻辑出现隐式类型转换错误。
• 循环内重复赋值无意义：vragen = loadedQuestions放在for循环内会重复执行多次，直接在循环外赋值一次即可。

修正后代码 #

let storageDif = localStorage.getItem("mD") || 'easy'; // 增加默认值兜底
console.log(storageDif.toString());

let storageCat = localStorage.getItem("mC") || 'cms'; // 增加默认值兜底
console.log(storageCat);

let geslideVragen = localStorage.getItem("slider");
let MAX_VRAGEN = Number(geslideVragen) || 10; // 转数字+默认值兜底
console.log(MAX_VRAGEN);
let vragen = [];

// 替换硬编码的difficulty、limit参数为动态变量
fetch(`https://quizapi.io/api/v1/questions?apiKey=kAFKilHLeEcfLkGE2H0Ia9uTIp1rYHDTIYIHs9qf&limit=${MAX_VRAGEN}&difficulty=${storageDif}&category=${storageCat}`)
    .then((res) => {
        return res.json();
    })
    .then((loadedQuestions) => {
        vragen = loadedQuestions; // 移到循环外，只赋值一次
        for (let i = 0; i < MAX_VRAGEN; i++) {
            console.log(vragen[i].question);
        };
        startGame();
    })
    .catch( err => {
        console.error(err);
    });

内容的提问来源于stack exchange，提问作者user13854357