Fetch for every one
Tags: javascript, beginners, webdev, programming
Published: 2023-08-04 21:29:03


Before writing any code, let's find out what Fetch stands for:
 
**Fetch** is an API that provides an interface for fetching 

resources such as databases 📊 **Fetch** is more powerful and 

flexible replacement for **XMLHttpRequest**. Hit this [link](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to learn more.

⬇️⬇️⬇️⬇️
⬇️⬇️⬇️⬇️
  
In this course we are going to create a small website that 

actually provides some data like: blogs, electonic stuffs, 

hobbies, etc. just **make sure** that those contents above 

are already created in the database, **otherwise** you could 

not be able to fetch them.😢


Alright then, now we are going to manipulate fetch from scratch.0️⃣


##1. CREATE DATABASE WITH JSON

First of all let's create our database; if you are using visual studio, create a new file with `.json` as extension.

For this project, my database is called **db.json**.

```
{
    "blogs": [
        {
            "title": "the Fetch API article",
            "body": "why do we use it?\nIt is a long established fact that a reader will be distracted ",
            "author": "Daniel",
            "image_url": "images/Right-Fetch.png",
            "id": 1,
            "link": "https://dev.to/daniel_kitam_31"
        },
        {
            "title": "shaif's cuisine web",
            "body": "why do we use it?\nIt is a long established fact that a reader will be distracted ",
            "author":"Shadrak",
            "image_url": "https://images.unsplash.com/photo-1556910096-6f5e72db6803?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8c2hhaWYlMjBjdWlzaW5lfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60",
            "id": 2,
            "link": "https://shaif-s-cuisine-dan.netlify.app/"
        },
        {
            "title": "Cara e-commerce",
            "body": "why do we use it?\nIt is a long established fact that a reader will be distracted ",
            "author":"Meshak",
            "image_url": "https://images.unsplash.com/photo-1472851294608-062f824d29cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGVjb21tZXJjZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60",
            "id": 3,
            "link": "https://daniel-web-ecommerce.netlify.app/"
        },
        {
            "title": "My Portfolio",
            "body": "why do we use it?\nIt is a long established fact that a reader will be distracted cfctgvgtv",
            "author":"Abed",
            "image_url": "https://media.istockphoto.com/id/515749452/fr/photo/portfolio.jpg?b=1&s=612x612&w=0&k=20&c=xXjP-4n9zVwBJAKOAeFF2wPhVdaIWeWEP_cdgC7_ldk=",
            "id": 4,
            "link": "https://danielkit-portfolio-website.netlify.app/"
        }
    ],
}
```
well, here it is our database! As you can see, this is 

actually the small model of our **JSON database** just to 

show you how does it look like; because literally it really 

contains so many data to provide — but don't worry at the end 

I'm going to link my GitHub where you will find the entire 

code source of this project.😊 

Alright, now let's enable our data base, to do this we are going to open the terminal and put the following command:

`npx json-server --watch db.json --port 8000` 

In case your database isn't called db.json like mine😕, put your database's name instead.🙂

This command allows javascript to be connected to your json 

database via the link actually generated still in your terminal;
The link should look like `http://localhost:8000/blogs`.🔗 

This command still works until you disable it.🔏

Well, now let's dive into the JavaScript side! You should look forward to definitly see how **The fetch() method interacts in javascript**.😄

##2. USING FETCH IN JS
   Create now the JavaScript file with the extension `.js` as you all know🙂

In my case I called it **fetch.js**.

The fetch() method generally takes one mandatory argument, the link to the resource you want to fetch your data; 

In our case we got the link that has been provided when we 

activated our JSON database, and it should look like this 

`http://localhost:8000/blogs`. 

The fetch() method returns a Promise that 

resolves to the Response to that request — as soon as the 

server responds with headers — even if the server response is 

an HTTP error status you could handle it anyway.

Much talking... right?😅 Now have a look ⬇️⬇️



![Fetch Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lszvfxr1yrk0xakb8nm5.png)


![Image console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2emajm45qiyrvqb1lvj4.png)

Alright guys! Maybe you thought it was so complicated... 
but see how **you are fetching your data just in 8 lines of code guys!**

##3. Annexes.

So guys, we are done with our article; nevertheless, you can build something huge with this fetch() method but I promised to link my github to see all my project on Fetch api, so here it is [https://github.com/danielkitam/Data-fetch](https://github.com/danielkitam/Data-fetch) 
      

And look at the end result of this website [https://fetch-data-web.netlify.app/](https://fetch-data-web.netlify.app/)

Alright; Hope this was helpful.. right?🙂 so please like and comment to let me know how you feel! why not subscribe for more learning.🤔👨🏽‍💻