Complete guide to Fetch API
Tags: javascript, api, webdev, codenewbie
Published: 2020-11-26 03:32:47

This is not the same average blog post you have seen on many sites. This is something new and amazing. 

The fetch API is a **promise-based** JavaScript API for making asynchronous HTTP requests in the browser. 

It is a simple and clean API that uses promises to provide a powerful and flexible feature set to fetch resources from the server. 

### How to use fetch API ? 

Using fetch API is really simple. Just pass the URL, the path to the resource you want to fetch, to **fetch() **method. 

```javascript
fetch( 'URL' )
      .then( red => {
                 // handle response data
  })
  .catch( err => {
                 // handle errors
  });
```

> Read More =>  [filter() method explained
](https://blog.rahulism.co/filter-method-explained-js) 

### Making get requests

By default, the fetch API uset GET method for asynchronous requests. Lets see a very simple example. Here we will make a request to the "Dummy API", using **fetch()**.

```javascript
const url = "http://dummy.restapiexample.com/api/v1/employees"; 
fetchurl()
     .then(res => {
            console.log(res);
})
      .catch(err => {
             console.log('Error: ${err}' ); 
});
```
> Dummy API is a fake API service for testing and prototyping

### Making post request

Fetch can also be used for any other HTTP method in the request: POST, PUT, DELETE, HEAD and OPTIONS. All you need to do is set the method and body parameters in the **fetch()** options. 

```javascript
const url = 'http://dummy.restapiexample.com/api/v1/create'
const user = {
      name: 'Rahul'
      age: '16'
      salary: '000'
};

const options = {
   method: 'POST'
   body: JSON.stringify(user), 
}

fetch(url, options)
     .then( res => res.json())
     .then( res=> console.log(res));
```
> Read more =>  [map() method explained](https://blog.rahulism.co/map-method-explained-js) 

### Error handling

The **catch()** method can intercept any error that is thrown during the execution of the request. However, the promise returned by the fetch() doesn't reject HTTP errors like 404 or 500. For that, we can use the "ok" property of response object. 

```javascript
const url = "http://dummy.restapiexample.com/api/v1/employee/40";
fetch(url) //404 error
     .then( res => {
          if (res.ok) {
                return res.json( );
          } else {
                return Promise.reject(res.status); 
           }
      })
      .then(res => console.log(res))
      .catch(err => console.log('Error with message: ${err}') ); 
```

### Fetch and Async/Await

Since fetch is a promis-based API, we can go one step further and use the ES2017 async/await syntax to make our code even simpler. 

```javascript
const url = 'http://dummy.restapiexample.com/api/v1/employees'; 
const fetchUsers = async () => {
    try {
       const res = await fetch(url);
     // check for 404 error
       if (!res.ok) { 
           throw new Error(res.status);
       }
       const data = await res.json();
          console.log(data);
       }
       // catch block for network errors
       catch (error) { 
            console.log(error); 
        }
}
fetchUsers( );
```
<hr>
### Help Needed Plz
Need help in raising fund to buy a Mechanical Keyboard. This pandemic has affected my family badly so can't ask my DAD for it. Please Help Me. 

<a href="https://www.buymeacoffee.com/rahxuls">
![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606540958103/otN4S9TK8.png)
</a>

<hr>
⚡Happy Coding | Thanks For Reading😀.