如何获取响应然后对其执行数组随机播放？

Question

我这里有一段代码。它获取 4 API 对 pokiapi 的调用，将响应转换为 JSON，然后将该响应转换为仅显示名称，因此当 Promise.all() 解析时它应该 return 一个数组4 个宠物小精灵名称。

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() 洗牌之前的数组时，控制台日志现在 returns undefined:

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 => 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
    }
}

我怀疑这是 return 回复方式的问题，但它会是什么？

编辑： 啊，显然问题出在我的 fisherYatesShuffle() 方法上。我最初用我制作的一些随机数组对其进行了测试，但我的测试一定很糟糕，因为它没有发现我的错误。

Answer 1

问题是 fisherYatesShuffle 没有 return 任何东西。（其中没有 return 语句。）相反，它只是对传递给它的数组重新排序。这意味着 .then(responses => this.fisherYatesShuffle(responses)) 将 undefined 作为 Promise 链的中间结果，因此这就是您在 console.log.

中观察到的结果

有 2 个可能的修复，具体取决于您要更改的部分。

选项 1 - 制作 fisherYatesShuffle return 其内容：

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 - 将承诺链显式更改为 return 随机排列的数组：

.then(responses => {
    this.fisherYatesShuffle(responses);
    return responses;
})
.then(responses => console.log(responses))

如何获取响应然后对其执行数组随机播放？

How do I fetch a response and then perform array shuffle on it?

javascript

arrays

promise

response

shuffle