如何在fetch请求中使用两个then获取Rick&Morty API返回的两个角色信息

现有代码仅发起单次API请求，获取到的是同一个角色的信息，所以赋值给两组DOM元素时内容完全重复。你可以利用Rick&Morty API原生支持的多ID查询能力，一次请求拿到两个不同角色的数据，效率比发起两次独立请求更高。

完整修改后代码 #

// 生成随机角色ID
gerarValorAleatorio = () => {
    return Math.floor(Math.random() * 671);
}

pegarPersonagem = () => {
    // 生成两个独立的随机ID
    let id1 = gerarValorAleatorio();
    let id2 = gerarValorAleatorio();
    // 多ID查询直接用英文逗号拼接在请求路径中即可
    return fetch(`https://rickandmortyapi.com/api/character/${id1},${id2}`, {
        method:'GET',
        headers: {
            Accept: 'application/json',
            "Content-type": 'application/json'
        }
    }).then((response) => response.json())
      .then((data) => {
        // 接口返回长度为2的数组，第一个元素对应id1的角色信息
        imagem.src = data[0].image;
        imagem.alt = data[0].name;
        nome.innerHTML = data[0].name;

        // 第二个元素对应id2的角色信息
        imagem2.src = data[1].image;
        imagem2.alt = data[1].name;
        nome2.innerHTML = data[1].name;
    })
}

补充说明 #

如果需要避免两个随机ID重复，可以增加去重逻辑，示例如下：

let id1 = gerarValorAleatorio();
let id2;
do {
  id2 = gerarValorAleatorio();
} while(id1 === id2)

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