Asynchronous JavaScript: The Complete Guide - Part 3 - Training Callbacks

In this article, we will train a bit more on callback functions. We will implement what was promised in the previous article: loading related games in our application that is already consuming a games API. You can check what we have already done in this series of articles at these links:

Now that we've made the request for the main games, it’s easier to request the related games. First step: let's create a new function in the requests.js file. This function will be called getRelatedGamesByName(). It will have a very similar functionality to the already created getGameByName(). The expected parameters will be the same; the only thing that will change is the API URL. Its code will be:

function getRelatedGamesByName(name, callback) {
    let request = new XMLHttpRequest();
    request.open('GET', `https://api.rawg.io/api/games/${name}/suggested`, true);
    request.onload = () => {
        let response = JSON.parse(request.response);
        if (typeof callback == 'function') callback(response);
    };
    request.send();
}

We now need to call this function in our HTML file. It will be requested when we click on a game from our already rendered list. So, we can add a click event to each

tag created inside the forEach() of the initGames() function. After creating the divGame variable, we will add this code:

divGame.addEventListener('click', e => {

    setGameLoad(gamesListRelationed);

    let gameTag = e.currentTarget;

    let gamename = gameTag.dataset.gamename;

    getRelatedGamesByName(gamename, function(gamesRelationed) {

        gamesListRelationed.innerHTML = '';

        gamesRelationed.results.forEach(game => {

            let divGameRelationed = setGameHTML(game);

            gamesListRelationed.append(divGameRelationed);

        });

    });

});

Explaining: we added a click event listener to each game element created. Thus, when clicking on a game, we will execute a series of actions: 1) call the “loading” function on the element that contains the related games; 2) retrieve the name of the game we clicked through the gamename variable; 3) call the getRelatedGamesByName() function, once again using the callback resource, as we will provide an anonymous function as the second parameter to this main function. Our callback will basically: 1) remove the contents of the

that will contain the new games, ensuring that the old information, if any, will not overwrite the new ones. We will then perform a new loop over the API results using a forEach(), creating within it the HTML for each related game and adding these new elements to the div that will contain the related games.

Let's test our application: we will refresh the page and look for a game. The result will be this:

It continues to work, just as it was tested in the previous article. Now, let’s click on a game from this list. The result is below:

And now we see the games related to the one we clicked on, once again coming from the API, using the concept of callback functions once again. Amazing, don’t you agree?

Just a small change. From this moment on, when we call the initGames() function, before executing the getGameByName() function, we need to keep the content of the related games

empty to avoid a conflict of information when we perform the search for a new game. So, just add the following line of code in the initGames() function:

gamesListRelationed.innerHTML = '';

In this article, we practiced a bit more on callback functions and implemented a new functionality in our project, which is excellent.

You can find the codes developed in this article at this link: https://github.com/hcodebr/javascript-assincrono-blog

Callback functions help a lot and are still widely used on the Web when it comes to asynchronous requests. However, JavaScript, in its latest versions, has brought us a new feature that has facilitated the use of asynchronous code. We are talking about promises. We will talk in detail about this feature in the next article: Asynchronous JavaScript: The Complete Guide - Part 4 - Using Promises. Don’t forget to share this post if you liked the content :)

See you in the next article!

javascript

async

assicrono

Keep learning with Hcode