Transcript from the "Fetching Data" Lesson
>> So it's time to work in our app, so, so far we have been just playing with the DOM. And the next step is to set up all the data management that we will have. And that means, for example, download the menu, the JSON that we have available, and store that menu somewhere.
[00:00:43] So we don't have anything known as a service in the DOM. But if you're coming, for example, from Angular, probably you've heard the term service, but on other libraries, you don't have. This is just, in this case, an object or a way to offer different services to the app, okay?
[00:01:04] So in this case, what we're going to create is a services folder. Remember that I mentioned that maybe we don't wanna creating a scripts folder, maybe we wanna follow a different pattern. So I'm going to create a services folder, and inside that folder I'm going to start with two services.
[00:01:22] An API that will be responsible for fetching the data from the network, and a store. And the store object will store data that in this case it's global to the app. This is just a concept, okay? You might have heard similar concepts in some libraries, this is just a concept that I'm applying here.
[00:01:46] So the store will store the state of the app, and right now the state of the app will contain a menu. That's the list of categories and products inside each category, and the cart that we start as an empty array. So I'm going to create these files, so I'm going to VS Code.
[00:02:42] But you will see that I'm using here capital S because I will create some kind of a singleton object. And sometimes when we are creating singleton objects, we follow the class syntax of starting with capital, but actually, it's up to you. So for the store, what we're going to do is we're going to create, for now, just a constant, it will be an object that will contain the menu.
[00:03:12] We start with null, that's how we will know we are using JSON syntax, so you should use colon. We will use null when it means we don't have it yet, for some reason, typically it's because it's still loading or we haven't loaded yet. And then the cart as an empty array, that's all.
[00:04:00] But I can export that store, and I'm going to export that as the default object that I'm exporting, okay? For now, just that will work, for the API, I'm also going to create an object. By the way, should I create the class and then an instance of that class?
[00:04:43] And then we'll create just a simple method to actually fetch the menu, then later we can add more more APIs. So in this case, it's going to be a function, I will use arrow function here. And what I want is to fetch to make an HTTP request to the API.
[00:05:05] In this case the API is pretty simple, it's just a get from a JSON file. So for that I'm going to use the fetch API. So I'm going to fetch from the URL, I can use API URL, or this URL in this case will work. The fetch API returns a promise, it's promise-based.
[00:05:27] Because it's promise-based, I can use then and catch, or I can use async await. So I think that async await looks better in our code. So I'm going to upgrade my ideal function that I have here, the arrow function, to be an async function. So then I can await for the fetch and store their results like so.
[00:05:54] The result in the fetch API, it's actually an HTTP response, it's not really the data yet. And one of the things that I can do is I can also await for a JSON parsing. So if I use result.json I'm actually saying I wanna parse the HTTP result as a JSON.
[00:06:22] And that's what we're going to return to whoever is calling this API. And finally, I'm going to export default.API. You will see that I will try to keep things as simple as possible. And that's one of the key aspects of being successful with vanilla JS. So being simple to understand what you're doing in separate files and following your own guidelines to do that, right?
[00:06:54] Because yeah, we can add more abstractions, we can add abstractions layers. But for that, first it's important to be confident on the platform itself first before adding more abstraction layers. So now, these are two services. So where are we going to use these services within app.js? The problem is that, well, in app.js I'm going to clean this up, so I'm going to clear out the DOM content loaded, and I will keep just one.
[00:07:25] How can I import my two services? At this point I cannot import them, because to use ES modules, we all need to be within the umbrella of a module, and this script is not a module. How can we convert or upgrade that script into a module? It's actually pretty simple.
[00:08:20] And that file can export and import things from other files as well.