如何多次使用fetch()的结果而不使其变得未定义?(JS新增)



我有一些基本代码,它使用fetch((从api中获取json。然后我";排序";(idk如果这是正确的词(通过";层";(同样不知道这个词(来获得(例如(他们在minecraft服务器上某个游戏模式下的击杀次数。问题是我想检查另一个数据,例如游戏。我不能再从api中获取数据,因为你每分钟只能获取一次每个玩家的数据。问题是,当我再次尝试使用fetch((的结果时,它不起作用,因为我认为承诺已经实现(我真的是Java脚本的新手(。这是代码:

<body>
<form>
<label for="fname">Username:</label><br>
<input type="text" id="username" name="username"><br>
</form>
<p class="costs" id="kills">Hello!</p>
<script>
function BedwarsKills() {
var queryString = location.search; // Returns:'?q=123'
let params = new URLSearchParams(queryString);
let q = params.get("username"); // is the number 123
console.log(q)
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 => data.player.stats.Bedwars.kills_bedwars)
.then(data => document.getElementById("kills").innerHTML = q + " has " + data + " kills")
}
BedwarsKills()
</script>       
</body>

只是为了澄清,我想添加一些其他的东西,比如这2行

.then(data => data.player.stats.Bedwars.kills_bedwars)
.then(data => document.getElementById("kills").innerHTML = q + " has " + data + " kills")

但是使用wins_bedwars代替使用相同fetch的kills_bedwars。有什么想法吗?

(如果您需要了解其他信息,请告诉我(

同步函数不应该使用两个.then()调用。您可以通过一个回调函数和一个本地变量实现相同的功能:

fetch(url)
.then(response => response.json())
.then(data => {
const kills = data.player.stats.Bedwars.kills_bedwars;
document.getElementById("kills").innerHTML = q + " has " + kills + " kills");
});

您可以很容易地在函数中放入多个语句,任意数量,除了kills_bedwars的语句外,还包括一些wins_bedwars的语句。

由于Promise链是一种管道,因此您应该一次将所有数据放入管道中,如:

fetch(url)
.then(response => response.json())
.then(data => data.player.stats.Bedwars)
.then(data => {
document.getElementById("kills").innerHTML = q + " has " + data.kills_bedwars + " kills");
document.getElementById("wins").innerHTML = q + " has " + data.wins_bedwars + " wins");
});

最新更新