THE PROMISE IN JAVASCRIPT

PROMISE INTRODUCTION

In the previous example, we made two asynchronous requests, the first to retrieve the post with ID=1 and the second to retrieve the post’s comments. We handled the asynchronous request with asynchronous callbacks, that is, invoked only when we have a response to our request. To make the second request (view comments) the first one (retrieve post ID=1) must succeed. There is a concatenation of events, for example, if the post in the request does not exist we cannot request its comments. Let’s take a real-world example, we ask a friend to go and buy us a jar of jam because we can’t. We need the jam because we want to make a tart to give to our mother. The events that must be concatenated are:

Our friend has to go and buy jam.
If the tart turns out well, we take it to our mother.

CONCATENATION OF EVENTS

It is necessary for all these concatenated actions to succeed. There is a concatenation of events in which the next one must occur only if the previous one is successful. Also, when I ask my friend to go buy jam, I don’t wait but do other things, I don’t get stuck waiting for the jam. So I made an asynchronous request. Promise is the mode introduced in ES6 that handles asynchronous code by overcoming the mechanism of asynchronous callbacks.

PROMISE

A promise is nothing more than an object created by the constructor function Promise for handling asynchronous code. A promise can assume status:

Pending
Fulfilled/resolved
Rejected

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>PROMISE</title>
</head>
<body>
    <script type="rocketlazyloadscript">
    /*Una promise non è altro che un oggetto creato dalla
    constructor function Promise per la gestione del codice
    asincrono. resolve e rejected sono due funzioni, resolve
    corrisponde a then, reject a catch.*/
    function azione(tipo){
        return new Promise((resolve,reject) => {
            let marmellataPortata = true;
            if(marmellataPortata === true){
              resolve(`Azione ${tipo} risolta`);//resolve corrisponde a then
            }else{
              reject(`Azione ${tipo} rifiutata`);//reject corrisponde a catch
            }
  
      });
    }
    const obbiettivo = azione('Portare marmellata');
    obbiettivo.then((risp) => {
          console.log(risp);
          return azione('Fare la crostata');
          /*--Dato che la funzione azione ritorna una promise
          possiamo invocare then in successione per altre azioni.*/
    }).then((risp) => {
        console.log(risp);
        return azione('Portare a nostra madre');
    }).then((risp) => {
        console.log(risp);
    })
    .catch((err) => {
          console.log(err);
    });
    //Invochiamo then perchè sole se l'amico ci porta la
    //marmellata allora possiamo fare la crostata. resolve
    //corrisponde a then catch a reject. Adesso vogliamo
    //concatenare altre azioni, abbiamo ricevuto la
    //marmellata ma ancora la dobbiamo fare.

/*--Abbiamo gestito con le promise il susseguirsi di
    una serie di azioni, e l'azione successiva può essere
    intrapresa solo se la precedente è andata a buon fine.*/
    </script>
</body>
</html>

HANDLE MULTIPLE AJAX REQUESTS WITH PROMISE

In this section we make an AJAX call to JSON Placeholder to retrieve the post with ID=1 and only if the request is successful do we make another one to retrieve the post comments. All this is done by replacing callbacks with promise. We create in libpromise.js a function request which will take as input the type of request (GET or POST) and the URL. This function returns a Promise having as parameters a reference to the resolve function and the reject function.

Copy to Clipboard

HANDLE MULTIPLE AJAX REQUESTS WITH PROMISE ALL

Promise.all returns a single promise when all promises are resolved. When we have a series of closely related promise, we can use Promise.all. We create two text files, f1.txt and f2.txt and we insert some dummy content. We make the request for the two files. With Promise.all it is enough for a request to fail. and the status of individual promise changes to rejected. Let’s try changing the name of one of the two files, this will give an error and you will enter the catch as the file will not be found. The contents of the unedited file will also not be displayed.

Copy to Clipboard

HTTP REQUESTS WITH API FETCH

The fetch api represents a new way of making http requests, going somewhat beyond AJAX requests. Suppose we want to read a text file, f1.txt.

const response = fetch(f1.txt);

console.log(response);

It is evident from the figure opposite that the fetch API works with promise. So we can handle the response with then and catch.

From console.log(response) we can see that what we get is a Response. As for the body of the response, we have a ReadableStream, which is nothing more than a data stream that needs conversion to a specific format. With the property ok we can know whether the request was successful or not. Regarding API fetch we enter inside the catch only if there are network errors, all other errors should be handled in the then.

Copy to Clipboard

ASYNC/AWAIT-ASYNCHRONOUS FUNCTIONS

The ES2017 specification introduced asynchronous functions with the keywords async/await. Asynchronous functions are based on promise. To make a function asynchronous, we place the keyword function before the function async.

Since the promises work asynchronously we get the following sequence:

Start
End
In test

Within an asynchronous function instead of always using .then for promise resolution we put the keyword await. With reference to the users function given in the code below with await say to the JS engine wait for the promise to be resolved then put the result in usersJSON.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>ASYNC/AWAIT-FUNZIONI ASINCRONE</title>
</head>
<body>
    <script type="rocketlazyloadscript">
       /*ES2017 ha introdotto la specifica delle
       funzioni asincrone con async/await. Sono basate sulle
       promise. Per rendere una funzione asincrona utilizziamo
       la keyword async. La funzione ritorna una promise.
       all'interno di una funzione asincrona invece di dover
       concatenare sempre then si utilizza await. Con await*/
       async function test(){
          return 'dentro la funzione';
       }
       console.log('inizio');
       test().then((risp) =>{
          console.log(risp);
       });
       console.log('fine');

async function utenti(){
            /*con await diciamo al motore javascript aspetta
            che la promise venga risolta poi metti il risultato in
            utentiJSON*/
            const utentiJSON = await fetch('../JSON/utenti.json');
            const utenti = utentiJSON.json();
            return utenti;
       }
       utenti().then((risp) => {
           console.log(risp);
       });
    </script>
</body>
</html>

LINKS TO PREVIOUS POSTS

THE JAVASCRIPT LANGUAGE

LINK TO CODE ON GITHUB

GITHUB