Introduction to the Fetch API

The Fetch API is the much simpler alternative to the XMLHttpRequest API . It is also the pure JavaScript alternative to JQuery’s ajax, get and post functions.

The Fetch API uses Promises to handle the result or callback. It usage is simple.

Example

fetch('https://your_url')
.then(response=>console.log(response))
.catch(err=>console.error(err))

The above example illustrates how to perform a get request by passing in the url, then you can handle the response using a promise , errors are caught in the catch block.

Options

You can customise the Fetch request by passing in some additional parameters, the supported list of parameters are

method – GETPOSTPUTDELETEHEAD

headers – object containing headers to be sent with the request

cache – cache mode (defaultreloadno-cache)

referrer – referrer of the request

mode – corsno-corssame-origin

redirect – followerrormanual

Post Example

By setting the method attribute, you can send post requests with custom parameters.

fetch( your_post_url, {
method: 'POST',
body: {"key":"value"},
headers: new Headers({
'Content-Type': 'application/json'
}),
}).then(response => response.json())}

The above example makes a post request to the url passing in a JSON object containing data in the body parameter, it also sets a custom Content-Type header. It then gets the response and converts the response to a JSON object.

Share this!

Leave a Reply

Your email address will not be published. Required fields are marked *