danielhagnoul

• Niveau du billet : moyen.
• Prérequis : ES2015.
• Couverture du sujet : bonne.
• Navigateurs compatibles (2016-02-6) avec fetch : Firefox 39+ et Chrome 43+.
• Exemples testés (2016-02-6) avec Chrome 49b (compatible à 91 % avec ES2015).

Dans ES2015, avec l'implémentation actuelle de Promises/A+, il est impossible d'annuler (cancel) une promesse ou d'interroger une promesse pour afficher une barre de progression. C'est parfois gênant, mais on peut ne pas attendre indéfiniment grâce à Promise.race( [ promesse1, promesse 2 ] ). La première promesse tenue terminera l'action.

Reprenons le dernier exemple du billet précédent et pour les besoins de la démonstration, accordons à la transaction fetch un délai de réalisation trop faible. En pratique, je vous conseille un délai minimum de 5000 millisecondes.

Construisons d'abord une promesse delay( ms ) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
let delay = function( ms ){
  return new Promise( ( resolve, reject ) => {
    setTimeout( resolve, ms );
  });
}

Fech, exemple modifié :

demoFetch5.html

Il commencera donc par un Promise.race( [ fetch, delay ] ) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Promise.race( [
  fetch( 'https://html.spec.whatwg.org/' ),
  delay( 50 ).then( () => {
    throw new Error( 'Le temps imparti est écoulé !' )
  } )
] )
.then( r => processStatus( r ) )
.then( r => {
  let
    reader = r.body.getReader(),
    decoder = new TextDecoder(),
    buffer = '',
    bytesReceived = 0;
 
  reader
    .read()
    .then( function processResult( result ){
      if ( result.done ){
        console.log( "Lecture du flux terminée." );
 
        let el = document.createElement( 'div' );
 
        el.innerHTML = buffer;
 
        document
          .querySelector( 'body' )
          .appendChild( el );
 
        return;
      }
 
      buffer += decoder.decode( result.value, { 'stream' : true } );
 
      return reader.read().then( processResult );
    });
})
.catch( er => console.log( er ) );