如何获取响应，然后对其执行数组洗牌？

问题描述

我这里有一段代码。它获取 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))