638 reads

Beginners Guide to Fetch API

by RahulNovember 27th, 2020

Too Long; Didn't Read

The fetch API is a promise-based JavaScript API for making asynchronous 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. The fetch() method can intercept any error that is thrown during the execution of the request. It 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.

Company Mentioned

featured image - Beginners Guide to Fetch API

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.

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

Read More => filter() method explained

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().

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.

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

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.

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.

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( );