Deep Tech Point - learn tech easy way

Javascript language is de-facto standard for making client-side web applications that consume different kinds of APIs. It can even be used for mobile applications thanks to wrapper frameworks such as Apache Cordova, React Native, or NativeScript. You can even use it with gaming frameworks like Cocos 2D, Unity, or many others. Almost all games published in recent few years, especially for mobile phones can also be classified as client-side applications that interact with server-side sending and receiving data such as score, in-game positions, moves, and many others to the server through an API.

But let’s take a look at a simple example of Javascript client application that consumes an API using a built-in fetch function.

The fetch function is a modern replacement for XMLHttpRequest and is already supported for some time in all relevant browsers such as Chrome, Safari, Firefox, and Edge. The only situation in which you might need to consider older XMLHttpRequest is if you need to support Internet Explorer or Android stock browser in 4.4.4 or lower versions. But a fragment of users who still use these browsers are really small, usually not worthy of the effort.

The fetch is also using Promises which significantly simplify application architecture making it less prone to errors.

For our example, we are going to consume an API that will provide us with Chuck Norris random jokes on every request. More information on API endpoints check: https://api.chucknorris.io/. The API endpoint that provides random joke is at: https://api.chucknorris.io/jokes/random. The HTTP method for making request will be GET, and API endpoint will return JSON data such as:

{
  "categories":[],
  "created_at":"2020-01-05 13:42:24.142371",
  "icon_url":"https://assets.chucknorris.host/img/avatar/chuck-norris.png",
  "id":"USjdUcJEQnCnlWu3jfKd5g",
  "updated_at":"2020-01-05 13:42:24.142371",
  "url":"https://api.chucknorris.io/jokes/USjdUcJEQnCnlWu3jfKd5g",
  "value":"Chuck Norris doesn't have a furnace. He heats his house by scaring the molecules into moving faster."
}

We are going to use the “value” property as it’s the text of the joke.

Now let’s see how to use the Javascript fetch function to make an API request.

fetch('https://api.chucknorris.io/jokes/random')
    .then(response => response.json())
    .then(myContent => {
        console.log(myContent);
    });

Since the Chuck Norris API uses GET method for all its requests we don’t need to explicitly set the method (GET is default).
However, production APIs almost always require other methods such as POST, PUT, or DELETE. Usually, CRUD operations Create, Read, Update, Delete use POST, GET, PUT, DELETE methods so we need to set this up before calling API endpoint. With Javascript fetch function we can set this up by adding a second argument which is the options object where we can change default properties of the request, such as method, or add properties such as headers, credentials, referrers, redirection handling, or body. The body is commonly used to pass parameters or JSON data.

This is an example of a POST request to an imaginary API endpoint.

fetch('https://api.somewebaddress.io/item', { 
                    method: 'POST',
                    headers: {
                       'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ itemName: 'Item 77' }) 
                 })
    .then(response => response.json())
    .then(data => {
        console.log(data); // data is JSON parsed object
    });

With Javascript fetch function you can use async await construct as well since the browser’s support is the same as with fetch meaning it won’t work in Internet Explorer and Android stock browser version 4.4.4 and lower.

You can play with full working example of Chuck Norris API client implementation on codepen.

Javascript fetch API example tutorial