迭代 ID 以在 API 调用中发送答案

【问题标题】：Iterating IDs to send in an API call迭代 ID 以在 API 调用中发送
【发布时间】：2022-01-15 13:02:50
【问题描述】：

我有一组加密硬币 ID，我需要在 API 调用中发送这些 ID，以获取每个硬币的数据。如何迭代它并发送 API 调用？

正在存储的 IDs 数组：

const getIds = async () => {
  Axios.get(
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false"
  ).then((response) =>
    setCoinIds((coinIds) => [
      ...coinIds,
      ...response.data.map((res) => res.id),
    ])
  );

};

硬币详情 API。 {coin_id} 是我需要针对每个 ID 迭代和发送 api 调用的地方。

export const getCoinsData = async () => {
  try {
    const response = await Axios.get(
      "https://api.coingecko.com/api/v3/coins/${coin_id)"
    );
    return response.data;
  } catch (e) {
    console.log(e);
  }
};

最后，我需要将所有硬币数据存储在一个集体对象中：

const fetchCoinData = async () => {
    setLoading(true);
    const fetchedCoinData = await getCoinsData();
    setData(fetchedCoinData);
    setLoading(false);
  };

【问题讨论】：

检查是否存在接受id数组的端点。
@Husnain Mehmood 考虑到 API 调用的速率限制，请检查我的答案。

标签： javascript reactjs

【解决方案1】：

您可以在使用来自服务器的响应填充数组时迭代 ID 数组。
另外，axios 应该小写。

export const getCoinsData = async () => {
  let coinsData = [];
  for (const id in coinIds) {
    try {
      const { data } = await axios.get(
        'https://api.coingecko.com/api/v3/coins/${id)'
      );
      coinsData.push(data);
    } catch (e) {
      console.log(e);
    }
  }
  return coinsData;
};

【讨论】：

【解决方案2】：

在免费版本上递归使用 CoinGecko 的 API 有点棘手。如果您浏览此 API documentation ，您会看到一条声明说他们对其 API 调用有速率限制。

Our Free API* has a rate limit of 50 calls/minute.

我已经重写了一个工作代码来获取所有硬币并获取它们的 ID，然后递归地调用 CoinGecko 的 API 来获取这些 ID，每个 API 调用之间的间隔为 3 秒，这使得我们的调用速度为 20 次调用/分钟。

这是相同的代码：

注意 - 您可以修改它以适应对设置状态和所有内容的反应。目前可以直接用node运行。

import axios from "axios";
const instance = axios.create({
    baseURL: "https://api.coingecko.com/api/v3",
});

const delay = async (ms = 3000) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
};

let coinIds = [];
const getIds = async () => {
    try {
        const response = await instance.get(
            "/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false"
        );
        coinIds = [...coinIds, ...response.data.map((coin) => coin.id)];
        console.log("? ~ file: apiCall.js ~ line 14 ~ getIds ~ coinIds", coinIds);
    } catch (e) {
        console.log("? ~ file: apiCall.js ~ line 17 ~ getIds ~ e", e.message);
    }
};

const getCoinsData = async (coin_id) => {
    console.log(
        "? ~ file: apiCall.js ~ line 22 ~ getCoinsData ~ coin_id",
        coin_id
    );
    try {
        const response = await instance.get(`/coins/${coin_id}`);
        return response.data;
    } catch (e) {
        console.log(
            "? ~ file: apiCall.js ~ line 26 ~ getCoinsData ~ e",
            e.message
        );
    }
};

const fetchCoinData = async () => {
    try {
        await getIds();
        coinIds = coinIds.slice(0, 4);
        // uncomment below to call API concurrently (if on paid version)
        // const fetchedCoinData = await Promise.all(coinIds.map((coinId) => getCoinsData(coinId)))

        // if on free version use this
        const fetchedCoinData = await coinIds.reduce(
            (acc, coinId) =>
                acc.then(async () => {
                    await delay();
                    const coinData = await getCoinsData(coinId);
                    return coinData;
                }),
            Promise.resolve()
        );
        console.log(
            "? ~ file: apiCall.js ~ line 33 ~ fetchCoinData ~ fetchedCoinData",
            fetchedCoinData
        );
    } catch (e) {
        console.log(
            "? ~ file: apiCall.js ~ line 36 ~ fetchCoinData ~ e",
            e.message
        );
    }
};

fetchCoinData();

【讨论】：