API multiple requests with axios / Vue.js, advice on doing things the smarter way

Question

First of: I'm a beginner at Vue.js/APIs so I hope my question is not too stupid (I may not be seeing the obvious) :)

So, Using Vue.js I'm connecting to this API and want to track the history of each crypto-currencies (no issues with getting any data from the API). Currencies information are accessible using a URL : https://api.coinranking.com/v2/coins And history is accessible using another : https://api.coinranking.com/v2/coin/ID_OF_THE_COIN/history

As you can see the second url needs the id of the specific currency which is available in the first one.

I would like to find a way to make only 1 get request for all currencies and their history rather than having to make as many requests as available currencies there are (about 50 on this API), I've tried several things but none has worked yet (for instance using the coin url and storing ids of the currencies in a table then using the history url and modifying it with the ids of the table but hit a wall) .

Here's the axios get request I have for the moment for a single currency:

const proxyurl = "https://cors-anywhere.herokuapp.com/"
const coins_url = "https://api.coinranking.com/v2/coins"
const history_url = "https://api.coinranking.com/v2/coin/Qwsogvtv82FCd/history"

//COINS DATA
       axios
       .get(proxyurl + coins_url, { 
           reqHeaders
       })
       .then((reponseCoins) => {
           // console.log(reponseCoins.data)
           this.crypto = reponseCoins.data.data.coins;
       })
       .catch((error) => {
           console.error(error)
       })

//GET ALL COINS UUIDs
       axios
       .get(proxyurl + coins_url, { 
           reqHeaders
       })
       .then((reponseUuid) => {
           this.cryptoUuidList = reponseUuid.data.data.coins;
           //access to each crypto uuid:
           this.cryptoUuidList.forEach(coinUuid => {
               console.log("id is: " + coinUuid.uuid)
               //adding uuids to table:
               this.coinsUuids.push(coinUuid.uuid);
           });
       })
       .catch((error) => {
           console.error(error)
       })

// COIN HISTORY/EVOLUTION COMPARISON
       axios
       .get(proxyurl + history_url, { 
           reqHeaders
       })
       .then((reponseHistory) => {
           //get data from last element
           const history = reponseHistory.data.data.history
           this.lastItem = history[history.length-1]
           // console.log(this.lastItem)
           this.lastEvol = this.lastItem.price
           // console.log(this.lastEvol)

           //get data from previous element:
           this.previousItem = history[history.length-2]
           this.previousEvol = this.previousItem.price
       })
       .catch((error) => {
           console.error(error)
       })

I probably forgot to give some info so let me know and will gladly share if I can

cheers,

Answer 1

I took a look at the API, they do not seem to give a way for you to get everything you need in one request so you will have to get each coin history separately.

However, I do se a sparkline key in the returned data, with what seems to be a few of the latest prices.

I do not know your projects's specifics but maybe you could use that for your initial screen (for example a coins list), and only fetch the full history from the API when someone clicks to see the details of a coin.