如何配置Coinranking API请求仅获取排名前5的加密货币而非前50

方案1：接口请求时直接指定返回数量（更推荐） #

Coinranking的加密货币列表接口原生支持limit查询参数，你可以直接在请求URL拼接该参数指定返回前5条数据，减少不必要的带宽消耗。
修改后的请求代码如下：

// 注意如果你的baseUrl本身已经带查询参数（比如已经有?xxx=yyy），就把?改成&拼接limit参数
fetch(`${proxyUrl}${baseUrl}?limit=5`, { 
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'X-My-Custom-Header': `${apiKey}`,
      'Access-Control-Allow-Origin': "*"
    }
})
  .then((response) => {
    if (response.ok) {
      response.json().then((json) => {
        console.log(json.data);
        let coinsData = json.data.coins;

        if (coinsData.length > 0) {
          var cryptoCoin = "";
        }
        coinsData.forEach((coin) => {
          cryptoCoin += "<tr>";
          cryptoCoin += `<td> ${coin.rank}</td>`;
            
          cryptoCoin += `<td> ${coin.btcPrice} </td>`;
          
          cryptoCoin += `<td> ${coin.name}</td>`;
          cryptoCoin += `<td> $${Math.round(coin.price*100)/100}</td>`;
          cryptoCoin += `<td> ${coin.symbol}</td>`;
          cryptoCoin += "<tr>";
        });
        document.getElementById("data").innerHTML = cryptoCoin;
      });
    }
  })
  .catch((error) => {
    console.log(error);
});

方案2：前端本地截取前5条数据 #

如果你不想修改请求逻辑，也可以在拿到返回的完整数组后，用slice方法截取前5个元素再遍历，只需要把代码里的let coinsData = json.data.coins;改成：

let coinsData = json.data.coins.slice(0,5);

其他逻辑不需要改动即可生效。

内容的提问来源于stack exchange，提问作者Ivan Cheng