danielhagnoul

La fonction kPromiseLog facilite le débogage des promesses et l'interception des erreurs

Noter ce billet

par

, 29/06/2016 à 23h51 (1280 Affichages)

Si vous êtes familiarisé avec les promesses, le code et ses commentaires vous suffiront. Dans le cas contraire, je vous conseille d'apprendre les bases avant d'utiliser cette fonction.

Code html :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test de kPromiseLog</title>
  <style>
    
 
  </style>
  <script>
    'use strict';
    
    const
      kPromiseDelay = function( ms ){
        // un setTimeout thenable
        
        return new Promise( ( resolve, reject ) => {
          setTimeout( resolve, ms );
        });
      },
      kPromiseLog = function(){
        /*
         * La fonction kPromiseLog facilite le
         * déboguage (console.log) et l'interception
         * des arreurs (catch).
         */
        
        /*
         * Tracking unhandled rejected Promises
         * http://www.2ality.com/2016/04/unhandled-rejections.html
         */ 
        window.addEventListener( 'unhandledrejection', ev => {
          ev.preventDefault();
          // on veut gèrer l'affichage de l'erreur
          
          console.log( `Erreur, motif : ${ ev.reason }` );
        }, false );
        
        window.addEventListener( 'rejectionhandled', ev => {
          console.log( `Erreur interceptée en retard.` );
        }, false );
        
        /*
         * Adaptation du code de promise-log
         * https://github.com/facundoolano/promise-log
         */
        let promise = Promise; // la fonction
        
        promise.prototype.log = function( prefix = '' ){
          // notation arrow impossible pour this
          
          return this // la promesse en cours
            .then( ( value = '' ) => {
              console.log( prefix, value );
              return value;
            })
            .catch( er => {
              console.error( prefix, er.stack || er );
              return promise.reject( er );
            });
        }
      };
      
    window.addEventListener( 'load', function( ev ){
      
      kPromiseLog();
      
      kPromiseDelay( 3000 )
        .log( `C'est fini, le délai est écoulé` );
      
      Promise.resolve( 42 )
        .log( 'debug prom1 : ' )
        .then( r => console.log( 'prom1, then after log' ) );
        
      Promise.reject( 'Promesse 2 rejetée' )
        .log( 'debug prom 2 : ' )
        .then( r => console.log( 'prom2, then after log' ) );
        
      let prom3 = Promise.reject( 'Promesse 3 rejetée' )
        .log( 'debug prom 3 : ' )
        .then( r => console.log( 'prom3, then after log' ) );
        
      kPromiseDelay( 3000 ).then( r => {
        prom3.catch( er => console.log( 'prom3, catch en retard' ) );
      });
      
    }, false );
  </script>
</head>
<body>
 
 
</body>
</html>