如何解决如何获取响应,然后对其执行数组洗牌?
我这里有一段代码。它获取 4 个对 pokiapi 的 API 调用,将响应转换为 JSON,然后将该响应转换为仅显示名称,因此当 Promise.all()
解析时,它应该返回一个包含 4 个 Pokemon 名称的数组。
handleClick(event) {
event.preventDefault()
const randNum1 = Math.floor(Math.random() * this.totalPokemon)
const randNum2 = Math.floor(Math.random() * this.totalPokemon)
const randNum3 = Math.floor(Math.random() * this.totalPokemon)
const randNum4 = Math.floor(Math.random() * this.totalPokemon)
Promise.all([
fetch('https://pokeapi.co/api/v2/pokemon/' + randNum1),fetch('https://pokeapi.co/api/v2/pokemon/' + randNum2),fetch('https://pokeapi.co/api/v2/pokemon/' + randNum3),fetch('https://pokeapi.co/api/v2/pokemon/' + randNum4),])
.then(responses => Promise.all(responses.map(r => r.json())))
.then(responses => Promise.all(responses.map(r => r.name)))
.then(responses => console.log(responses))
}
最后一行代码是控制台记录响应,我得到了我所期望的,这是一个 Pokemon 名称数组。一个例子可能是 ["mewtwo","jynx","ponyta","geodude"]。
但是,当我在控制台日志之前添加一个新行以使用 fisherYatesShuffle()
对前一个数组进行混洗时,控制台日志现在返回未定义:
handleClick(event) {
event.preventDefault()
const randNum1 = Math.floor(Math.random() * this.totalPokemon)
const randNum2 = Math.floor(Math.random() * this.totalPokemon)
const randNum3 = Math.floor(Math.random() * this.totalPokemon)
const randNum4 = Math.floor(Math.random() * this.totalPokemon)
Promise.all([
fetch('https://pokeapi.co/api/v2/pokemon/' + randNum1),])
.then(responses => Promise.all(responses.map(r => r.json())))
.then(responses => Promise.all(responses.map(r => r.name)))
.then(responses => this.fisherYatesShuffle(responses))
.then(responses => console.log(responses))
}
我不认为 fisherYatesShuffle()
方法是错误的,因为我已经在我为测试目的制作的其他数组上尝试过它,并且非常好。以防万一,这里是 fisherYatesShuffle() 的实现。
//Takes in an array and returns a shuffled array
fisherYatesShuffle(guesses) {
for (let i = guesses.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * i)
const temp = guesses[i]
guesses[i] = guesses[j]
guesses[j] = temp
}
}
我怀疑这是响应返回方式的问题,但它可能是什么?
编辑:啊,显然问题出在我的 fisherYatesShuffle()
方法上。我最初用我制作的一些随机数组对其进行了测试,但我的测试一定很糟糕,因为它没有发现我的错误。
解决方法
问题在于 fisherYatesShuffle
不返回任何内容。 (其中没有 return
语句。)相反,它只是对传递给它的数组重新排序。这意味着 .then(responses => this.fisherYatesShuffle(responses))
将 undefined
作为 Promise 链的中间结果,所以这就是您在 console.log
中观察到的。
有 2 个潜在的修复,具体取决于您要更改的部分。
选项 1 - 让 fisherYatesShuffle
返回其内容:
fisherYatesShuffle(guesses) {
for (let i = guesses.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * i)
const temp = guesses[i]
guesses[i] = guesses[j]
guesses[j] = temp
}
return guesses; // add this line
}
选项 2 - 更改承诺链以显式返回混洗后的数组:
.then(responses => {
this.fisherYatesShuffle(responses);
return responses;
})
.then(responses => console.log(responses))
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。