How to Use the Fetch API with Star Wars Examples ⭐️ 🚀
Hi again Guys, Today I’m going to talk about the Fetch API, Yes I know Fetch API was released in 2015, but I need to review in deep all the features and the ways to use it because this it’s the biggest content in my training for the MWS Certification, not being more, let’s start.
To make this publication more interesting, and not make them feel as if they were in Back to the Future, I have decided to do all the examples around Star Wars 😎
Fetch was born from the need to make big improvements to XHR with respect to API design terms(Yep the XHR it’s the Fetch father 😱), here we see a comparative sample of both:
And we can make the same thing with Fetch:
If you notice, fetch returns a promise as a response, that’s it’s great for async transactions.
Now we can explore more in depth the Fetch features, first we go to explore the more used stream readers:
Handling a JSON file
First we’re gonna load this JSON file that contains a list info of the star wars movies(tittle, description, cast, episode number) via Fetch and prints the result in the html file, for that we use the json method for converting the raw data to a Javascript object:
Create a main.js file and add the code below:
an index.html markup:
We need to add some files in the project root for this example to work: a css style and resources files(starwars_logo, falcon)
See the live example here:
Handling a Text/HTML Responses
For the next example we’re go to load a menu.html external file inside our index.html, using the textmethod for handling the fetch response and add this data to the menu element viainnerHTML .
in the main.js we add the code below:
Handling a Buffer Data
For this example we’re going to load a sound file, for this we use the arrayBuffer method, add the code below in top of the main.js file:
In the above example we create an audioContext element where we go to save the soundsourceof buffer data, we define the play and stop elements that reference the interaction buttons, also we create the behavior functions for both, in the last part create the getAudioData to load the sound file via arrayBuffer method , this response it’s saved into source buffer data.
We cannot forget the sound.html file:
And We can see the live example here:
Handling a Blob response and Use the clone() function together
For this example we gonna load a image via blob method also create an image element with this response data, and additionally we use the clone method to copy the response data and create another image element.
Add this code below to main.js file:
And the image.html file:
See the live example here:
And now let’s put the blob() and text() functions together to make a nice web example
We’re gonna load a nice-web.html file via text method and use the getAudio function described in the above example, all this pieces together get a nice result.
Add the below code to main.js file:
And cannot miss the load-page.html file:
I almost forget that we need to add the starwarsintro.css file in the root project, for this example to work correctly.
See the live example here:
Here is full list of the stream readers available:
Another interesting thing about Fetch is the `mode` property
If I request //google.com from this site using XHR or plain fetch it will fail. This is because it's a CORS request and the response doesn't have CORS headers.
However, with fetch, you can make a no-cors request:
For more on the origin of CORS, see Anne VK’s article on same-origin policy.
And that’s all for today 😅
Here’s the Github repo with all source code.
And Here’s the full live version with this examples.
And to make some examples, I used these recommended external resources:
If you want explore more about the Fetch API:
