APIS walk-through

Let's walk through some code and see how APIS work

Overview#

Let's say you're making a weather page where the user enters their zip code and gets back their forecast for the day.

• The user navigates to your page and the page loads.
• The user types 98109 into the search bar and hits enter
• Your app makes a request to api.example.com/weather?zip=98109
• The API response { "temperature": 75, units: "F" }
• Your app decodes the string to an object using JSON.parse
• Your app updates the page to say "The current weather is 75ºF"

Implementation#

So let's dive into a few things:

• Who is makes the API? It depends. It could be you; your frontend could be requesting against a server you yourself wrote (a topic for a different class.) Or it could be against a myriad of public and free APIs. Or it could be a service you pay for.
• There are many free APIS we can use e.g dog.ceo is a favorite of mine.
• Whats is the ?zip=98109 part of the request. This is called a query string. It allows us to send parameters to a request (like sending parameters to a function) that it can use. In that case, we're sending the zip code we want the weather for. If you want multiple queries, they are separated by an & e.g. example.com/weather?zip=98109&day=tomorrow.
• What variables you send via querystring will be determined by the API.

<button id="dog-btn">Gimme Doggo</button>
<div id="dog-target"></div>

Javascript..

const DOG_URL = "https://dog.ceo/api/breeds/image/random";

const doggos = document.getElementById("dog-target");

function addNewDoggo() {
  const promise = fetch(DOG_URL);
  promise
    .then(function (response) {
      const processingPromise = response.text();
      return processingPromise;
    })
    .then(function (processedResponse) {
      const dogObject = JSON.parse(processedResponse);
      const img = document.createElement("img");
      img.src = dogObject.message;
      img.alt = "Cute doggo";
      doggos.appendChild(img);
    });
}

document.getElementById("dog-btn").addEventListener("click", addNewDoggo);

Let's disect this ..#

Requests take time. The process of calling out to the Internet, reaching the server, the server processing, responding, and coming back takes time. It could be very fast. It could be a minute. You don't know until it happens. You need to have the ability to wait in your code. This is called async code, the A in AJAX.

JavaScript has several ways of dealing with this. We're using a way called promises. A promise represents a future value. With a promise, you can give it a function with its then function to run whenever it gets its ansewr back. In this case, we say "hey, you're going to get some text back from this API, so we need that text.

fetch is a function (builtin for the browser) that allows you to give it a URL like https://dog.ceo/api/breeds/image/random and it will try to get information from that API. In this case we're asking for a random image of a dog.

fetch gives you back a promise. Then we need to tell it what we think the API is going to send us back. In our case we're saying it's going to be text() from the API. There are others (and I'll show you one in a sec.)

You can do what's called promise chaining. This allows you to do one async action after another. In our case, we don't know how long it will take to transform our response into text (it's basically instant and usually is but it could not be). In any case, by returning the promise at the end of the first then, we then can use its data in the second then. That's why that's weird that way.

In the second then we read the message which has the URL, we create an img tag, and append it to the DOM. The result is we get a cool dog pic!

Code Reformating#

Lets' format our code and optmize it a bit.

<button id="dog-btn">Gimme Doggo</button>
<div id="dog-target"></div>

javascript

const DOG_URL = "https://dog.ceo/api/breeds/image/random";

const doggos = document.getElementById("dog-target2");

function addNewDoggo() {
  const promise = fetch(DOG_URL);
  promise
    .then(function (response) {
      const processingPromise = response.json(); // json instead of text
      return processingPromise;
    })
    .then(function (processedResponse) {
      // we get to skip this line since it'll already be an object
      // const dogObject = JSON.parse(processedResponse);

      const img = document.createElement("img");
      img.src = processedResponse.message;
      img.alt = "Cute doggo";
      doggos.appendChild(img);
    });
}

document.getElementById("dog-btn2").addEventListener("click", addNewDoggo);

What did we do?#

in the next lesson I'm going to explain what you are seeing the .then() and .catch() methods.

Don't worry I will hold your hands through this.😊😊