Use Fetch API for web apps

Home / Blog / Use Fetch API for web apps

Fetch API has become the standard for web API requests for a while now and it is supported in almost any modern browsers nowadays. Let’s use Fetch API and implement it for the web

Use Fetch API

Previously, there are many existing solutions for handling API requests for the web, ex. jQuery Ajax, request (node), axios (node) … why there needs another?

Why Fetch API?

Fetch API is the standard API being supported native in most of today web browsers.

Fetch API is widely supported
Fetch API is widely supported – caniuse.com

Hmm, IE is not supported, you ask? Since Microsoft stopped support for IE, no more development for IE in future, and we will expect very less number of users use IE.

Fetch API Specifications

The specs of Fetch API is described here, https://fetch.spec.whatwg.org/

Check it out if you want to learn details about Fetch. In short, fetch() is being used in following form:

fetch(ENDPOINT, OPTIONS).then( response => {
    // do something with response
}).catch(error => {
    // do something with error
});

ENDPOINT is the API target endpoint that you want to make actual requests to.

OPTIONS is the Request object.

Since fetch() returns a Promise, so you can handle it in chain with then() and catch() as usual.

The data return from Fetch API is a Response object.

Fetch API Examples

Aright, let’s try some examples to work with Fetch API.

Regular GET request

Query random-user API:

fetch('https://randomuser.me/api/').then(response => {
    if(response.ok) return response.json();
}).then(data => {
    console.log('Data', data);
}).catch(err => {
    console.log(err);
});

To get actual data, we have to resolve and call response.json() in order to get actual content returned by the API endpoint.

If there is any error, you can easily handle it through Promise.catch().

Use more HTTP request methods

By default, fetch() assumes that you use GET method. In case, you want to use other HTTP methods like POST, PUT, DELETE, PATCH… add method to the request options.

fetch(ENDPOINT, { method: 'POST' })
Specify request headers

You can put any custom header value by adding into the headers property of request options.

fetch(ENDPOINT, {
    headers: {
        "Content-Type": "application/json",
    }
)
Send post body

To post data, you will need to include post data into body property of request options.

So, to request JSON data:

fetch(ENDPOINT, {
    method: 'POST',
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({ name: "Pete Houston" })
})

To request form data:

fetch(ENDPOINT, {
    method: 'POST',
    headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
    },
    body: "name=Pete%20Houston"
})
Include the credentials on fetch request

To do this, use the credentials property.

credentials: "include"

Fetch API Polyfill

In order for older browsers to use fetch() , there is a polyfill made by Github, https://github.com/github/fetch

Summary

Fetch API is fairly simple to learn and implement into any web app. Since most of modern browsers support it, why not make use of it to cut down the cost of unnecessary cost of third-party libraries! It is a good thing for the web.

Leave a Reply