This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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