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 JavaScript API for making asynchronous HTTP requests in the browser. promise-based 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 method. fetch() fetch( )
      .then( { })
  .catch( { }); 'URL' => red // handle response data => 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() url = ; 
fetchurl()
     .then( { .log(res);
})
      .catch( { .log( ); 
}); const "http://dummy.restapiexample.com/api/v1/employees" => res console => err console '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 options. fetch() url = user = { : age: salary: }; options = { : body: .stringify(user), 
}

fetch(url, options)
     .then( res.json())
     .then( .log(res)); const 'http://dummy.restapiexample.com/api/v1/create' const name 'Rahul' '16' '000' const method 'POST' JSON => res => res console Read more => map() method explained Error handling The 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. catch() url = ;
fetch(url) .then( { (res.ok) { res.json( );
          } { .reject(res.status); 
           }
      })
      .then( .log(res))
      .catch( .log( ) ); const "http://dummy.restapiexample.com/api/v1/employee/40" //404 error => res if return else return Promise => res console => err console '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. url = ; fetchUsers = () => { { res = fetch(url); (!res.ok) { (res.status);
       } data = res.json(); .log(data);
       } (error) { .log(error); 
        }
}
fetchUsers( ); const 'http://dummy.restapiexample.com/api/v1/employees' const async try const await // check for 404 error if throw new Error const await console // catch block for network errors catch console ⚡Happy Coding | Thanks For Reading😀. Previously published at https://rahulism.co/complete-guide-to-fetch-api

Fetch

Proof of Work - Portfolio

Read My Stories

Buy Me a Coffee

Portfolio

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Beginners Guide to Fetch API

Too Long; Didn't Read

Company Mentioned

Rahul

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Beginners Guide to Fetch API

Too Long; Didn't Read

Company Mentioned

Rahul

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES