javascript-get-request-example.svelte

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