Hoe Vue.js en Axios te gebruiken om gegevens van een API weer te geven

Introductie

Vue.js is een front-end JavaScript framework voor het bouwen van gebruikersinterfaces. Het is vanaf de basis ontworpen om incrementeel te worden aangenomen, en het integreert goed met andere bibliotheken of bestaande projecten. Deze aanpak maakt het geschikt voor kleine projecten, maar ook voor geavanceerde single-page applicaties wanneer het wordt gebruikt met andere tools en bibliotheken.

Een API, of Application Programming Interface, is een softwaretussenpersoon die twee applicaties in staat stelt met elkaar te communiceren. Een API exposeert vaak gegevens die andere ontwikkelaars kunnen consumeren in hun eigen apps, zonder zich zorgen te hoeven maken over databases of verschillen in programmeertalen. Ontwikkelaars halen vaak gegevens op van een API die gegevens retourneert in het JSON-formaat, die ze integreren in front-end applicaties. Vue.js is zeer geschikt voor het consumeren van dit soort API’s.

In deze tutorial maak je een Vue-toepassing die de Cryptocompare API gebruikt om de huidige prijzen van twee toonaangevende cryptocurrencies, Bitcoin en Ethereum, weer te geven. Naast Vue gebruik je de Axios-bibliotheek om API-verzoeken te maken en de verkregen resultaten te verwerken. Axios is een goede keuze omdat het automatisch JSON-gegevens omzet in JavaScript-objecten en het ondersteunt Beloftes, wat leidt tot code die gemakkelijker te lezen en te debuggen is. En om de zaken er mooi uit te laten zien, zullen we het Foundation CSS-framework gebruiken.

Opmerking: De Cryptocompare API is alleen gelicentieerd voor niet-commercieel gebruik. Raadpleeg hun licentievoorwaarden als je deze wilt gebruiken in een commercieel project.

Vereisten

Voordat je aan deze tutorial begint, heb je het volgende nodig:

A text editor that supports JavaScript syntax highlighting, such as Atom, Visual Studio Code, or Sublime Text. These editors are available on Windows, macOS, and Linux.
Bekendheid met het gebruik van HTML en JavaScript samen. Meer informatie vind je in Hoe JavaScript aan HTML toe te voegen.
Bekendheid met het JSON-gegevensformaat, waarover je meer kunt leren in Hoe te werken met JSON in JavaScript.
Vertrouwdheid met het maken van verzoeken naar API’s. Voor een uitgebreide handleiding over het werken met API’s, bekijk Hoe Web API’s te Gebruiken in Python3. Hoewel het geschreven is voor Python, zal het je nog steeds helpen de kernconcepten van het werken met API’s te begrijpen.

Stap 1 — Het Creëren van een Basis Vue Applicatie

In deze stap zal je een basis Vue applicatie maken. We zullen een enkele HTML-pagina bouwen met wat nagebootste data die we uiteindelijk zullen vervangen door live data van de API. We zullen Vue.js gebruiken om deze nagebootste data weer te geven. Voor deze eerste stap zullen we alle code in een enkel bestand houden.

Maak een nieuw bestand genaamd index.html met behulp van je teksteditor.

Voeg in dit bestand de volgende HTML-markering toe, die een HTML-skelet definieert en de Foundation CSS-framework en de Vue.js bibliotheek van content delivery networks (CDN’s) ophaalt. Door een CDN te gebruiken, hoef je geen extra code te downloaden om met de bouw van je app te beginnen.

index.html

<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"> <meta charset="utf-8"> <title>Cryptocurrency Pricing Application</title></head> <body> <div class="container" id="app"> <h3 class="text-center">Cryptocurrency Pricing</h3> <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> BTC in USD </p> </div> <div class="card-divider"> <p>{{ BTCinUSD }}</p> </div> </div> </div> </div> <script src="https://unpkg.com/vue@3"></script> </body></html>

De regel {{ BTCinUSD }} is een aanduiding voor de data die Vue.js zal verstrekken, wat de manier is waarop Vue ons in staat stelt om data declaratief in de UI weer te geven. Laten we die data definiëren.

Direct onder de <script>-tag met Vue, voeg deze code toe om een nieuwe Vue-applicatie te maken en een datastructuur te definiëren voor weergave op de pagina:

index.html

... <script> const { createApp } = Vue createApp({ data() { return { BTCinUSD: 3759.91 } } }).mount('#app') </script>...

Deze code maakt een nieuwe Vue-applicatie-instantie aan en koppelt de instantie aan het element met de id van app. Vue noemt dit proces het monteren van een applicatie. We definiëren een nieuwe Vue-instantie en configureren deze door een configuratie object door te geven.
Aan de createApp-instantie geven we een gegevensobject door dat de waarde van BTCinUSD retourneert. Verder hebben we de mount-methode van de createApp-instantie aangeroepen met het argument #app dat de id van het element aangeeft waarop we deze applicatie willen monteren, en een data-optie met de gegevens die we beschikbaar willen hebben voor de weergave.

In dit voorbeeld bevat ons gegevensmodel een enkel sleutel-waardepaar dat een nepwaarde voor de prijs van Bitcoin bevat: { BTCinUSD: 3759.91}. Deze gegevens worden weergegeven op onze HTML-pagina, of onze weergave, op de plaats waar we de sleutel hebben ingesloten tussen dubbele accolades zoals dit:

index.html

<div class="card-divider"> <p>{{ BTCinUSD }}</p></div>

We zullen deze hardgecodeerde waarde uiteindelijk vervangen door live gegevens van de API.

Open dit bestand in uw browser. U ziet de volgende uitvoer op uw scherm, die de nepgegevens weergeeft:

We tonen de prijs in Amerikaanse dollars. Om deze in een extra valuta weer te geven, zoals euro’s, voegen we een ander sleutel-waardepaar toe aan ons gegevensmodel en voegen we een andere kolom toe in de markup. Voeg eerst de regel voor euro’s toe aan het gegevensmodel:

index.html

Stap 2 — Scheiden van JavaScript en HTML voor Duidelijkheid

Om te leren hoe dingen werken, hebben we alle code in één bestand geplaatst. In deze stap scheidt u de toepassingscode in twee afzonderlijke bestanden: index.html en vueApp.js. Het bestand index.html zal de markup behandelen, en het JavaScript-bestand zal de toepassingslogica bevatten. We houden beide bestanden in dezelfde map.

Wijzig eerst het bestand index.html en verwijder de JavaScript-code, vervang deze door een link naar het bestand vueApp.js.

Zoek dit gedeelte van het bestand op:

index.html

... <script src="https://unpkg.com/vue@3"></script> <script> const { createApp } = Vue createApp({ data() { return { BTCinUSD: 3759.91, BTCinEURO: 3166.21 } } }).mount('#app') </script>...

En wijzig het zodat het er zo uitziet:

index.html

... <script src="https://unpkg.com/vue@3"></script> <script src="vueApp.js"></script>...

Maak vervolgens het bestand vueApp.js aan in dezelfde map als het bestand index.html.

Plaats in dit nieuwe bestand dezelfde JavaScript-code die oorspronkelijk in het bestand index.html stond, zonder de <script>-tags:

vueApp.js

 const { createApp } = Vue createApp({ data() { return { BTCinUSD: 3759.91, BTCinEURO: 3166.21 } } }).mount('#app')

Sla het bestand op en herlaad de index.html in de browser. Je zult hetzelfde resultaat zien als eerder.

Hier heb je de app gescheiden van de markup. Vervolgens voeg je meer gegevens toe om meer cryptocurrencies te ondersteunen dan alleen Bitcoin.

Stap 3 — Gebruik van Vue om over Data te Itereren

In deze stap ga je de datastructuur herstructureren en de weergave aanpassen om prijzen te tonen voor zowel Bitcoin als Ethereum.

Open het bestand vueApp.js en wijzig het return-gedeelte van het datamodel zodat het er als volgt uitziet:

vueApp.js

const { createApp } = Vue createApp({ data() { return { results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}} } }}).mount('#app')

Ons datamodel is iets complexer geworden met een geneste datastructuur. We hebben nu een sleutel genaamd results die twee records bevat: één voor Bitcoin-prijzen en een andere voor Ethereum-prijzen. Deze nieuwe structuur stelt ons in staat om wat duplicatie in onze weergave te verminderen. Het lijkt ook op de data die we zullen krijgen van de Cryptocompare API.

Sla het bestand op.

Nu gaan we onze markup aanpassen om de gegevens op een meer programmatische manier te verwerken.

Open het bestand index.html en zoek dit gedeelte van het bestand waar we de prijs van Bitcoin weergeven:

index.html

... <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> BTC in USD </p> </div> <div class="card-divider"> {{BTCinUSD}} </div> </div> </div> <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> BTC in EURO </p> </div> <div class="card-divider"> {{BTCinEURO}} </div> </div> </div> </div>...

Vervang het met deze code die over de door jou gedefinieerde dataset itereert.

index.html

... <div class="columns medium-4" v-for="(result, index) in results"> <div class="card"> <div class="card-section"> <p> {{ index }} </p> </div> <div class="card-divider"> <p>$ {{ result.USD }}</p> </div> <div class="card-section"> <p> &#8364 {{ result.EUR }}</p> </div> </div> </div>...

Deze code gebruikt de v-for directive die werkt als een for-loop. Het itereert over alle sleutel-waarde paren in ons datamodel en toont de gegevens voor elk daarvan.

Wanneer je de pagina opnieuw laadt in de browser, zul je de nagebootste prijzen zien:

Deze aanpassing stelt ons in staat om een nieuwe valuta toe te voegen aan de resultaten data in vueApp.js en deze op de pagina te laten zien zonder verdere wijzigingen.

Voeg nog een nagebootst item toe aan de dataset met de gemarkeerde informatie om dit uit te proberen:

vueApp.js

const { createApp } = Vue createApp({ data() { return { results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}, "NEW Currency":{"USD":5.60,"EUR":4.70}} } }}).mount('#app')

Voeg de komma toe na het Ethereum item. Sla het bestand op.

Als je nu de pagina laadt in de webbrowser, zie je het nieuwe item weergegeven:

Zodra we de data programmatisch aanpakken, hoeven we geen nieuwe kolommen handmatig toe te voegen in de markup.

Hier heb je voorbeeldgegevens gebruikt om prijzen te bekijken voor meerdere valuta’s. Laten we nu echte gegevens ophalen met behulp van de Cryptocompare API.

Stap 4 — Gegevens ophalen van de API

In deze stap vervang je de nagebootste gegevens door live gegevens van de Cryptocompare API om de prijs van Bitcoin en Ethereum op de webpagina te tonen in Amerikaanse dollars en euro’s.

Om de gegevens voor onze pagina te krijgen, zullen we een verzoek doen aan https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR, dat Bitcoin en Ethereum in Amerikaanse dollars en euro’s aanvraagt.
Deze API zal een JSON-respons retourneren.

Gebruik curl om een verzoek te doen aan de API om de respons te zien in een terminalsessie:

curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'

Je zult output zien zoals dit:

Output
{"BTC":{"USD":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}

Dit resultaat lijkt op het hard gecodeerde gegevensmodel dat je hebt gebruikt in de vorige stap, maar met de huidige waarden van Bitcoin en Ethereum. Het enige wat we nu hoeven te doen is de gegevens omwisselen door een verzoek te doen naar deze URL vanuit onze app.

Om het verzoek te doen, zullen we de mounted() functie van Vue gebruiken in combinatie met de GET functie van de Axios-bibliotheek om de gegevens op te halen en deze op te slaan in de results-array in het gegevensmodel. De mounted functie wordt één keer aangeroepen zodra de Vue-app aan een element is gekoppeld. Zodra de Vue-app is geladen, zullen we het verzoek naar de API maken en de resultaten opslaan. De webpagina wordt op de hoogte gesteld van de wijziging en de waarden zullen op de pagina verschijnen.

Open eerst index.html en laad de Axios-bibliotheek door een script toe te voegen onder de regel waarin je Vue hebt opgenomen:

index.html

... <script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="vueApp.js"></script>...

Sla het bestand op, open vervolgens vueApp.js.

Wijzig en update vueApp.js zodat het een verzoek doet aan de API en het gegevensmodel vult met de resultaten.

vueApp.js

const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";const { createApp } = Vue createApp({ data() { return { results:[] }}, mounted() { axios.get(url).then(response => { this.results = response.data }) }}).mount('#app')

Let op, we hebben de standaardwaarde voor resultaten verwijderd en vervangen door een lege array. We hebben geen gegevens wanneer onze app voor het eerst wordt geladen, maar de HTML-weergave verwacht enkele gegevens om over te itereren wanneer deze wordt geladen.

De functie axios.get gebruikt een Promise. Wanneer de API succesvol gegevens retourneert, wordt de code binnen het then-blok uitgevoerd en worden de gegevens opgeslagen in onze resultaten-variabele.

Sla het bestand op en herlaad de index.html-pagina in de webbrowser. Deze keer zie je de actuele prijzen van de cryptocurrencies.

Als je niets ziet, kun je Hoe de JavaScript Developer Console te gebruiken raadplegen en de JavaScript-console gebruiken om je code te debuggen. Het kan even duren voordat de pagina wordt vernieuwd met gegevens van de API.

Je kunt ook deze Github repository bekijken, die de html– en js-bestanden bevat die je kunt downloaden voor controle. Je kunt ook de repository klonen.

In deze stap heb je je app aangepast om live gegevens op te halen voor beoordeling.

Conclusie

In minder dan vijftig regels hebt u een API-consumerende applicatie gemaakt met slechts drie tools: Vue.js, Axios en de Cryptocompare API. U hebt geleerd hoe u gegevens op een pagina kunt weergeven, kunt itereren over resultaten en statische gegevens kunt vervangen door resultaten van een API.

Nu u de basisbeginselen begrijpt, kunt u andere functionaliteiten aan uw applicatie toevoegen. Pas deze applicatie aan om extra valuta’s weer te geven, of gebruik de technieken die u hebt geleerd in deze tutorial om een andere webapplicatie te maken met behulp van een andere API.

Hoe Vue.js en Axios te gebruiken om gegevens van een API weer te geven – techsyncer (2024)

Introductie

Vereisten

Stap 1 — Het Creëren van een Basis Vue Applicatie

Stap 2 — Scheiden van JavaScript en HTML voor Duidelijkheid

Stap 3 — Gebruik van Vue om over Data te Itereren

Stap 4 — Gegevens ophalen van de API

Conclusie