Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<svelte:head>
<title>JavaScript GET Request: An Example</title>
</svelte:head>
<script>
import fetch from 'isomorphic-unfetch'
import Coding from './_coding.svelte';
const url='https://api.coindesk.com/v1/bpi/currentprice.json'
const fetchText = (async () => {
const response = await fetch(url);
return await response.json()
})()
</script>
<style>
.featured {
background-color: black;
color: white;
}
.featured > p {
font-family: 'Quicksand', sans-serif;
text-align: center;
padding-top: 3vh;
padding-bottom: 3vh;
font-size: xx-large;
}
@keyframes backside {
0% { opacity: 0; } 100% { opacity: 1; }
}
.code {
background-color: #f0f0f0;
padding-left: 1vw;
}
.schmancy {
background-color: #43a047;
padding: 1vw;
transform: rotate(-1deg);
}
.fancy {
background-color: blue;
color: gold;
position: relative;
animation-name: backside;
animation-duration: 5s;
padding: 1vw;
transform: rotate(2deg);
}
.fancy > p {
background-color: gold;
color: blue;
padding: 5px;
font-family: 'Chelsea Market', cursive;
transform: rotate(-1deg);
}
</style>
<p>In this tutorial, I'll show how to make a GET request in a JavaScript page, as simply as possible.</p>
<p>Let's start with the API. To make a GET request, there must be an API. </p>
<p>The API stands for Application Programming Interace. It's an endpoint - a URL - you can visit to get a response. It answers your GET request with data.</p>
<p>We're going to use this API from CoinDesk, a cryptocurrency news site, for Bitcoin prices.</p>
<a href='https://api.coindesk.com/v1/bpi/currentprice.json'>https://api.coindesk.com/v1/bpi/currentprice.json</a>
<p> The 'request-maker' is normally a piece of code, but it can also be your browser. You can go to the link by clicking on the link; it's just some text. </p>
<p>It's probably hard to read and doesn't look very good, for a webpage. It's ultra no-frills.</p>
<p>This is what many API's do: they dispense plain text, for you to style and display in your webpage.</p>
<p>The plain text version is ugly. But with styling, it looks good; it's presentable information people will like.</p>
<p>It's also real-time information, so unlike something that's hard coded, it won't go out of date.</p>
<p>Here's that same information from the website above, styled nicely using CSS in this page, shown below.</p>
{#await fetchText}
<p>...waiting</p>
{:then data}
<div class="featured">
<p>{data.time.updateduk.split("at")[0]}</p>
</div>
<div class="schmancy">
<div class="fancy">
<p>${data.bpi.USD.rate} <span style="float: right;" >{data.bpi.USD.description}</span></p>
<p>£{data.bpi.GBP.rate} <span style="float: right;" >{data.bpi.GBP.description}</span></p>
<p>€{data.bpi.EUR.rate} <span style="float: right;" >{data.bpi.EUR.description}</span></p>
</div>
</div>
{:catch error}
<p>An error occurred!</p>
{/await}
<p>The code to do this in the JavaScript framework this page is written in, Svelte, is shown below.</p>
<p>This defines the function, the part that works the same across frameworks.</p>
<p> I used the fetch method. It's a little bit simpler than an xlr request, the original way to do this.</p>
<p>You can read more about their <a href="https://developers.google.com/web/updates/2015/03/introduction-to-fetch">differences</a> here, but bottom line, you want code that works, and fetch works & can be used anywhere xlr would have been used.</p>
<div class="code">
<pre><code>
{`const url='https://api.coindesk.com/v1/bpi/currentprice.json';
const fetchText = (async () => {
const response = await fetch(url);
return await response.json();
})() `}
</code></pre>
</div>
<p>So that gets the data. Now you have to show it.</p>
<p>The way to show it differs between frameworks and JavaScript. But basically both use something called 'await'.</p>
<p>Here's how it looks in JavaScript, the most common use case.</p>
<div class="code">
<pre><code>
{`
<div class="box">
<div class="featured">
<p class="featured" id="banner">waiting...</p>
</div>
<div class="schmancy">
<div class="fancy">
<p>$<span id="usd">0</span> <span id="usd-description" style="float: right;" ></span></p>
<p>£<span id="gbp">0</span> <span id="gbp-description" style="float: right;" ></span></p>
<p>€<span id="eur">0</span> <span id="eur-description" style="float: right;" ></span></p>
</div>
</div>
</div>
<script>
const url='https://api.coindesk.com/v1/bpi/currentprice.json';
const fetchSet = (async () => {
const response = await fetch(url);
const data=await response.json();
document.getElementById("banner").innerHTML=data.time.updateduk.split("at")[0];
document.getElementById("usd").innerHTML=data.bpi.USD.rate;
document.getElementById("gbp").innerHTML=data.bpi.GBP.rate;
document.getElementById("eur").innerHTML=data.bpi.EUR.rate;
document.getElementById("usd-description").innerHTML=data.bpi.USD.description;
document.getElementById("gbp-description").innerHTML=data.bpi.GBP.description;
document.getElementById("eur-description").innerHTML=data.bpi.EUR.description;
});
fetchSet();
</script>
`}
</code></pre>
</div>
<p>This is how it looks in Svelte.</p>
<div class="code">
<pre><code>
{`{#await fetchText}
<p>...waiting</p>
{:then data}
<div class="featured">
<p>{data.time.updateduk.split("at")[0]}</p>
</div>
<div class="schmancy">
<div class="fancy">
<p>$ { data.bpi.USD.rate <span style="float: right;" } > { data.bpi.USD.description } </span></p>
<p>£ { data.bpi.GBP.rate <span style="float: right;" } > { data.bpi.GBP.description } </span></p>
<p>€ { data.bpi.EUR.rate <span style="float: right;" } > { data.bpi.EUR.description } </span></p>
</div>
</div>
{:catch error}
<p>An error occurred!</p>
{/await}
`}
</code></pre>
</div>
<p>Despite the similarities, you can still see the strong similarities.</p>
<p>Here's what the page+code looks like, in HTML+JavaScript: in one .html file, with the ending .txt (so it doesn't render).</p>
<p>You can download the file, open it in a code editor, rename it to .html, make changes to it, and see how that changes the page when you re-open the same file in your browser (which will render, as it does here, like a normal webpage).</p>
<p><a href="get-request-html.txt">get-request-html.txt</a> </p>
Here's the Svelte file, actually this page, except as code.
<p><a href="javascript-get-request-example.txt">javascript-get-request-example.txt</a></p>
<p>There's some CSS in there too, to make the animations, but that's presented without comment, so as not to make this overly long; you could remove all of that and it wouldn't change the core API/get request content.</p>
<p>So that's how you do a GET request. It can get more complicated if you have to authorize, and of course if the data returned is more complicated, or if you have to hit multiple endpoints. </p><p> But generally speaking, that's the procedure, which you can adapt to your situation. </p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.