API 使用 axios 的多个请求/Vue.js，关于以更聪明的方式做事的建议

Question

首先：我是 Vue 的初学者。js/APIs 所以我希望我的问题不是太愚蠢（我可能没有看到显而易见的东西）:)

所以，使用 Vue.js 我正在连接到这个 API 并想跟踪每个加密货币的历史（从 API 获取任何数据没有问题）。可以使用 URL 访问货币信息： https://api.coinranking.com/v2/coins 可以使用另一个访问历史记录： https://api.coinranking.com/v2/coin/ID_OF_THE_COIN/history

如您所见，第二个 url 需要第一个可用的特定货币的 ID。

我想找到一种方法，只对所有货币及其历史发出 1 次获取请求，而不必尽可能多地发出可用货币的请求（在这个 API 上大约有 50 个），我我尝试了几件事，但 none 仍然有效（例如使用硬币 url 并将货币的 ID 存储在 table 中，然后使用历史记录 url 并修改它使用 table 的 ID 但撞墙了）。

这是我目前针对单一货币的 axios get 请求：

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)
       })

我可能忘了提供一些信息，所以让我知道，如果可以的话，我很乐意分享

干杯，

Answer 1

我看了一下 API，它们似乎没有提供一种方法让您在一次请求中获得所需的一切，因此您必须分别获取每个硬币的历史记录。

不过，我确实在返回的数据中找到了一个 sparkline 键，其中似乎是一些最新的价格。

我不知道你的项目的细节，但也许你可以将它用于你的初始屏幕（例如硬币列表），并且只在有人点击查看详细信息时从 API 中获取完整的历史记录一枚硬币。

API 使用 axios 的多个请求/Vue.js，关于以更聪明的方式做事的建议

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

api

get-request

vue.js

axios