Making Fetch (Requests) Happen

Made Lapuerta
Jul 3 · 4 min read

The third week of my being a developer relations intern at Google in NYC revolved around learning Google Cloud Functions. As someone who learned to code by playing around with link hovers and custom cursors on Tumblr, naturally I wanted to embed my new knowledge of Cloud Functions into a web app. Was this a challenge? Absolutely.

Of course, first I needed to come up with an idea for my app.

I must confess and say that I knew almost nothing about machine learning until I started my internship at Google, which is why I so intrigued by playing around with the Google Vision AI. I decided my super cool, tech-savvy, machine learning web app was going to make a call to this vision AI: I would send it a picture and return the data obtained from the cloud.

This is where Google Cloud Functions comes into play. Something I learned the hard way (read: after hours of painful confusion and visits to StackOverflow) is that making calls to any service in the Google Cloud requires several levels of authorization. Cloud Functions acts as a server that handles all of this work for you — hooray!

Additionally, calling the Vision AI from a Cloud Function as opposed to from the JavaScript in your front end means your credentials (private key IDs, billing account data, and the like), are handled securely and free from potential hackers.

So, combining my newfound love for the Google Vision AI and Cloud Functions, here is what I wanted to achieve in my web app:

In order to call my Cloud Function, I needed to use — you guessed it! — a fetch request. Here’s how you make fetch happen:

var functionEndpoint = "YOUR_FUNCTION_URL";
fetch(functionEndpoint)
.then(res => res.json())
.then(function(data) {
/** DO STUFF WITH YOUR DATA **/
}).catch(function(error) {
console.log("Err is:" + err);
});

I made a ‘GET’ request to my Cloud Function, where functionEndpoint was set to the function’s URL. I was passing in one parameter; the fileID of the image I wanted to be sent through the Vision AI. As per ‘GET’ request specification, the parameter was sent through the functionEndpoint URL, which makes the body of the fetch request itself much simpler.

So, how do I actually get back the data from my Cloud Function, and display it on my HTML page? This is when I learned about arrow functions.

.then(res => res.json())

Arrow functions implicitly return, which is why there is no need for a “return” statement prior to my res.json(). The “.then” bit, when pasted directly after a fetch request, signifies that we are obtaining the data returned from the function call. In this code, our data is being caught in the variable res, which is a very cute abbreviation of the word response. However, the Vision AI has specified that it is returning data in JSON format, which is why the .json() bit is necessary.

Now that I’ve gotten my response data from the server, printing it into my HTML is as simple as another .then:

.then(function(data) {
document.getElementById("output").innerHTML =
JSON.stringify(data, null, 2);
}

And of course, somewhere in your HTML you are going to need to specify this destination:

<pre id="output"> </pre>

A lot of internet searching & visits to StackOverflow led me to utilise a “pre” tag as the best way to print JSON data in an HTML page.

The last part of the fetch request is the error catch, which basically handles cases in which things might (definitely will) go wrong.

There you have it. That is a simple fetch request from embedded JavaScript in an HTML page to a function in the Cloud. Integrating Cloud Functions into web apps is exciting because you can make these API calls publicly accessible on the web, so that a users don’t have to run a single line of code or download any software.

Playing around with GCFs and Google APIs is free as long as you are operating within the free tier — yay for affordable tech hobbies!

Plus, my Tumblr is about to look really, really cool.

Let me know how you’re using GCF or Google APIs in your web apps, I’d love to hear from you.

Google Cloud Platform - Community

A collection of technical articles published or curated by Google Cloud Platform Developer Advocates. The views expressed are those of the authors and don't necessarily reflect those of Google.

Thanks to Franziska Hinkelmann

Made Lapuerta

Written by

Developer Relations Intern @ Google, NYC. Student @ Harvard University. Roots in Spain & Cuba. Find my stuff: www.madeleine.me.

Google Cloud Platform - Community

A collection of technical articles published or curated by Google Cloud Platform Developer Advocates. The views expressed are those of the authors and don't necessarily reflect those of Google.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade