JS入门问题：如何多次复用fetch()返回结果而不出现undefined？

• 你之前的写法问题在于Promise链中提前将返回值裁剪为了kills_bedwars单个数值，后续链式调用只能拿到这个击杀数字，自然无法获取其他字段。你只需要在拿到完整的Bedwars统计对象时，一次性处理所有需要的字段即可，全程只会发起1次fetch请求，不会触发API频率限制。
• 如果后续需要在其他函数里复用这份请求结果，可以把fetch返回的Promise存在全局变量里，Promise执行完成后再调用.then()依然可以拿到缓存的结果，不会重复发起网络请求。

1. 首先在HTML里新增用于展示获胜次数的DOM节点：

<p class="costs" id="kills">Hello!</p>
<!-- 新增获胜次数展示节点 -->
<p class="costs" id="wins"></p>

2. 修改JS部分的fetch逻辑，不要提前裁剪数据：

function BedwarsStats() {
    var queryString = location.search;
    let params = new URLSearchParams(queryString);
    let q = params.get("username");
    console.log(q)

    const url = "https://api.hypixel.net/player?name="+q+"&key=d3a8fade-b2e6-4a3b-8239-e11a1c9a52d4"
    console.log(url)
    fetch(url)
        .then(response => response.json())
        .then(data => {
            // 拿到完整的Bedwars统计对象，一次性取所有需要的字段
            const bedwarsStats = data.player.stats.Bedwars
            // 赋值击杀数
            document.getElementById("kills").innerHTML = q + " 共有 " + bedwarsStats.kills_bedwars + " 次击杀"
            // 赋值获胜次数
            document.getElementById("wins").innerHTML = q + " 共有 " + bedwarsStats.wins_bedwars + " 次胜利"
            // 后续要加其他字段直接在这里加即可，比如游玩局数可以取对应字段赋值
        })
}
BedwarsStats()

建议你把API密钥放到后端服务做转发，前端直接暴露密钥可能会被其他人盗用，导致你的API请求配额被耗尽。

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