This practical course offers an introduction to the Fetch API.
Learning Objectives
- Understand what Fetch APIs are
- Learn how to:
- Pass through a URL to get a response
- Analyze a JSON response
- Parse JSON with the .json() method
- Extract a specific piece of data from the response
- Use the Fetch API in conjunction with a higher order function
Intended Audience
This course is intended for anyone who wants to learn about the Fetch API.
Prerequisites
Anyone with an interest in the Fetch API or Web APIs in general.
The following course serves as a primer on JavaScript Promises that the Fetch API uses: Introduction to JavaScript Promises
The following course serves as a primer for the higher order Map function used in this video: Introduction to Higher Order Functions: Map & Filter
Introduction to Web APIs: Fetch API. On the screen, I have a requestUrl variable and this represents a server-side API URL from which I would like to request some data. I'm gonna begin by typing fetch, parentheses, passing through an argument of requestUrl. Fetch API is a promise-based API, meaning I need to use the .then statement to handle the promise object. .then, parentheses, and the way the promise object is handled is by passing it through a parameter. And this is a function that will handle the promise object. And I will give this function a parameter of response, and this will be a arrow function. So arrow, curly brackets, and I'm gonna return response.json, parentheses.
So pausing for a moment, when interacting with server-side APIs and making a fetch request, usually the data is gonna come back in JSON format. So I need to use this built-in .json method to parse the response into something usable. As part of this process, the first .then statement returns an additional promise. So I need to use another .then statement to resolve this promise object. And the function parameter is data. Using an arrow, I'm gonna console.log the data. I'm gonna execute the fetch request, and to the right, there is a singular object.
So what does this mean? Well, the Fetch API is a way of fetching resources, typically data. When working with server-side APIs, either through the use of the API's documentation or your own experimentation, you need to create a form of analysis to determine how to consume this data for your web application. Here I have a singular object. It has four properties and if I wish to access the title, I would have to access that property value. So I'm gonna change the console.log from data to data.title. And I will execute the fetch request again and to the right, it's just a title from the response.
Now, this is just a singular object of data. What if I had to work with a larger set of data? I'm gonna change data.title back to data and change the requestUrl. I'm gonna execute the fetch request again and now there is this array of user objects. Each user has a lot of information, including that ID that represents the sequential order of that specific user, and the email address. How would I console.log this user's email address? I'm gonna change the console.log from data to data at the index of two. Remember, arrays are zero index. And because the email address is a property, to access that value, I'm gonna attach .email and I will execute the fetch request again and there's this user's email address.
Now, taking this a step further, what if I wanted to grab all the user email addresses and store it into an array from this data? I'm gonna use a higher-order function in combination with this fetch request to create a new array with every email address. I'm gonna replace the console.log with const emails and set it equal to data.map, and higher-ordered functions take a function as a argument. So I'm gonna pass through element as a parameter for an arrow function. And then I'm gonna return element.email. When this fetch request is executed, the JSON response will be iterated through using map, and every email address from each element of the array will be put into a new array called emails.
Now, after this higher-order function, I'm gonna console.log emails. I will execute the fetch request and to the right, there's an array of all the email addresses from the JSON response. And that's it. Thanks for watching at Cloud Academy.
Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.
Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.
Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.
Farish is an avid powerlifter, sushi lover, and occasional Funko collector.