Unsplash JS

Fetch

We'll start by doing a fetch() with our API endpoint that we found in the Unsplash API documentation. This fetch is going to go GET information from the Unsplash API endpoint. Since we didn't specify a method, it will perform a GET request to the random endpoint of the Unsplash API. Make sure you have your HTML page open in your browser, so you can see your console.logs throughout this lesson!

var randomImage = document.querySelector('.random-image'); 
console.log("randomImage:", randomImage);

fetch('https://source.unsplash.com/random')

After Fetch, What Do We Do?

We've done our fetch, but how do we actually get the information back from it? Since fetch starts a Promise, we can use the then() method to return that Promise. As a reminder, then() takes up to two arguments: callback functions for the success and failure cases of the Promise. Here, we're just using the success argument, calling it response. If successful, we'll get a response back from the API, and then we can do stuff with it!

var randomImage = document.querySelector('.random-image'); 
console.log("randomImage:", randomImage);

fetch('https://source.unsplash.com/random') 
.then(function(response) {

})

Error Handling

Something we didn't do in the Star Wars API is think about error handling. If, somehow, we get something weird back from the API, we don't want to display something that is incorrect or that could break our application. To make sure we're safe, we need to check and see if the response is ok. If it isn't an ok response (or anything other than 200), then we're going to return an Error. Otherwise, we're going to return a response.

The Error we're using is (from MDN docs): The Error constructor creates an error object. Instances of Error objects are thrown when runtime errors occur. The Error object can also be used as a base object for user-defined exceptions..

var randomImage = document.querySelector('.random-image'); 
console.log("randomImage:", randomImage);

fetch('https://source.unsplash.com/random') 
.then(function(response) {
  if (!response.ok){ 
    console.log(response);
    return new Error(response);
  } 
  console.log("Response:", response);
  return response.blob(); 
})

Blob

Note our response and how we're returning it. In the Star Wars API, we used response.json(), this time we're using .blob(). From the docs: The blob() method of the Body mixin takes a Response stream and reads it to completion. It returns a promise that resolves with a Blob..

So, it says a promise that resolves with a blob? So, since we're resolving a promise, we can chain a then after this response.blob(). But first, what is a blob??? From the docs: A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.. A Blob is typically an image or some sort of otherwise file-like object, but in our case, we're using it for images!!

Cool, now let's do something when the promise resolves with our Blob that is our image!

var randomImage = document.querySelector('.random-image'); 
console.log("randomImage:", randomImage);

fetch('https://source.unsplash.com/random') 
.then(function(response) {
  if (!response.ok){ 
    console.log(response);
    return new Error(response); 
  } 
  console.log("Response:", response);
  return response.blob(); 
})
.then(function(photoBlob) {
  console.log("My Blob:", photoBlob)
})

Let's start by first using console.log to look at our blob. Notice that it says size: and type:. The type should be some sort of image, which is what we want!

Doing Stuff with the Blob

Now, that we have our blob, how can we put that in HTML? How do we normally display images in HTML? With our <img>! But src in an <img> usually refers to a file system or url location. So how can we get a location for our blob? Luckily, there's a method for that. URL.createObjectURL(). The MDN docs say: The URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object.In our case, this URL is created to represent, in our case, the Blob object. Cool! We can run that and then have an URL for our object to use in an <img>. Make your code look like the following, and then refresh your page in your browser.

var randomImage = document.querySelector('.random-image'); 
console.log("randomImage:", randomImage);

fetch('https://source.unsplash.com/random') 
.then(function(response) {
  if (!response.ok){ 
    console.log(response);
    return new Error(response); 
  } 
  console.log("Response:", response);
  return response.blob(); 
})
.then(function(photoBlob) { 
  console.log("My Blob:", photoBlob)
  var objectURL = URL.createObjectURL(photoBlob); 
  console.log("Object URL:", objectURL);
})

We can now see our Object URL, so we should be able to use it now. Let's set the src of our randomImage to be this new url! We can console.log it out to make sure it's set correctly!

var randomImage = document.querySelector('.random-image'); 
console.log("randomImage:", randomImage);

fetch('https://source.unsplash.com/random') 
.then(function(response) {
  if (!response.ok){ 
    console.log(response);
    return new Error(response); 
  } 
  console.log("Response:", response);
  return response.blob(); 
})
.then(function(photoBlob) { 
  console.log("My Blob:", photoBlob)
  var objectURL = URL.createObjectURL(photoBlob); 
  console.log("Object URL:", objectURL);
  randomImage.src = objectURL; 

  console.log("randomImage.src:", randomImage.src);
})

Catching Errors

Our application should now be working! But what would happen if we had an error? We do a lot of different things: we've got a fetch(), a .blob(), and a .createObjectURL(). That's a lot of places where things could go wrong. How can try to prevent any possible errors from getting through and breaking our application? We can use a thing called catch().

From MDN, The catch() method returns a Promise and deals with rejected cases only. So rejected cases only, AKA any possible errors. It also returns a promise, which is important to note. Combining catch() and our

if (!response.ok){ 
    console.log(response);
    return new Error(response); 
  }

is a good way to prevent a lot of issues from breaking our application, and instead handling them appropriately. Check out how we use catch() below. This is also the final JS code! Make sure yours matches and that your Unsplash page is working! When you refresh, you should get a new random picture.

var randomImage = document.querySelector('.random-image'); 
console.log("randomImage:", randomImage);

fetch('https://source.unsplash.com/random') 
.then(function(response) {
  if (!response.ok){ 
    console.log(response);
    return new Error(response); 
  } 
  console.log("Response:", response);
  return response.blob(); 
})
.then(function(photoBlob) { 
  console.log("My Blob:", photoBlob)
  var objectURL = URL.createObjectURL(photoBlob); 
  console.log("Object URL:", objectURL);
  randomImage.src = objectURL; 

  console.log("randomImage.src:", randomImage.src);
})
.catch(function(err) { 
  console.log(err); 
});

Challenge

Try and set up an API key on Unsplash. In this example, we used an open endpoint that doesn't require a key, but many of their other endpoints do!! This could be a tough challenge, but spent a few minutes to see how you might set it up. Don't spend more than about 30 minutes on this, as we'll cover API keys and the whole setup process more in-depth later.