Comment puis-je exécuter plusieurs fonctions de manière séquentielle et arrêter toutes les opérations en cas d'échec?

Question

J'ai plusieurs fonctions Javascript, chacune effectue une manipulation DOM, puis exécute une requête ajax. Je veux être capable d'exécuter la première fonction, qui manipule le DOM puis déclenche sa requête ajax, puis, lorsque la requête ajax se termine, je veux exécuter la deuxième fonction si la requête ajax est vraie, ou arrêter l'exécution du reste des fonctions et effectuer d'autres manipulations DOM (comme afficher un message d'erreur). Je souhaite que ces fonctions s'exécutent séquentiellement, l'une après l'autre, et ne se poursuivent que si aucune d'entre elles ne renvoie false à partir de leur requête ajax. Si aucun d'entre eux ne retourne faux, alors tous devraient fonctionner et finalement je ferais une manipulation que j'ai dans mon callback "toujours".

Comment puis-je accomplir ceci? Ma première pensée a été d'utiliser des promesses, pour garder le code propre, mais après plusieurs heures de lecture, je n'arrive tout simplement pas à comprendre comment faire fonctionner ce code.

Ci-dessous mon code actuel, et c'est ce que je reçois dans ma console quand il exécute:

inside test1 
inside test2 
inside test3 
fail 
[arguments variable from fail method] 
always 
[arguments variable from always method] 

Voici ce que je veux dans ma console (notez la contient pas de chaîne « à l'intérieur test3 ») :

inside test1 
inside test2 
fail 
[arguments variable from fail method] 
always 
[arguments variable from always method] 

Voici le code:

(function($) { 
    var tasks = { 
     init: function() { 
      $.when(
       this.test1(), 
       this.test2(), 
       this.test3() 
      ).done(function() { 
       console.log('done'); 
       console.log(arguments); 
      }) 
      .fail(function() { 
       console.log('fail'); 
       console.log(arguments); 
      }) 
      .always(function() { 
       console.log('always'); 
       console.log(arguments); 
      }); 
     }, 

     test1: function() { 
      console.log('inside test1'); 
      return $.getJSON('https://baconipsum.com/api/?type=meat-and-filler'); 
     }, 

     test2: function() { 
      console.log('inside test2'); 
      // note the misspelled "typ" arg to make it fail and stop execution of test3() 
      return $.getJSON('https://baconipsum.com/api/?typ=meat-and-filler'); 
     }, 

     test3: function() { 
      console.log('inside test3'); 
      return $.getJSON('https://baconipsum.com/api/?type=meat-and-filler'); 
     } 
    }; 

    tasks.init(); 
})(jQuery) 

Toutes les idées?

Answer 1

En utilisant les promesses ne fait ce code beaucoup plus propre

Note: Promesse/A + promesse callbacks .alors et .catch ne jamais prendre un argument, donc pas besoin de regarder à arguments, il suffit d'utiliser un seul argument

Ce code (ES2015 +) montre la facilité

let p = Promise.resolve(); 
Promise.all([this.test1, this.test2, this.test3].map(fn => p = p.then(fn()))).then(allResults => 

alternativement, en utilisant array.reduce

[this.fn1, this.fn2, this.fn3].reduce((promise, fn) => promise.then(results => fn().then(result => results.concat(result))), Promise.resolve([])).then(allResults => 

Dans les deux cas, allResults est un tableau de (résolu) résulte de la testN fonctions

Il crée un (résolu) promesse de « commencer » la chaîne des promesses

le mappage # mappe chaque fonction (this.test1 etc) à exécuter dans .then du résultat précédent.Les résultats de chaque this.testn promesse sont retournés dans un nouveau tableau, qui est l'argument pour Promise.all

si l'un des TestN échouent, la prochaine ne sera pas en exécution

var tasks = { 
    init() { 
     let p = Promise.resolve(); 
     Promise.all([this.test1, this.test2, this.test3].map(fn => p = p.then(fn()))) 
     .then(results => { 
      console.log('done'); 
      console.log(results); 
      return results; // pass results to next .then 
     }).catch(reason => { 
      console.log('fail'); 
      console.log(reason); 
      return reason; // because I return rather than throw (or return a Promise.reject), 
      //the next .then can will get `reason` in it's argument 
     }).then(result => { 
      console.log('always'); 
      console.log(result); 
     }); 
    }, 
    test1() { 
     return $.getJSON('https://baconipsum.com/api/?type=meat-and-filler'); 
    }, 
    test2() { 
     return $.getJSON('https://baconipsum.com/api/?typ=meat-and-filler'); 
    }, 
    test3() { 
     return $.getJSON('https://baconipsum.com/api/?type=meat-and-filler').then(result => { 
      if(someCondition) { 
       throw new Error("sum ting wong"); 
       // or 
       return Promise.reject(new Error("sum ting wong")); 
      } 
      return result; 
     }); 
    } 
}; 
tasks.init(); 

pour le code dans la question, vous pourriez simplifier encore

var tasks = { 
    init() { 
     let p = Promise.resolve(); 
     const urls = [ 
      'https://baconipsum.com/api/?type=meat-and-filler', 
      'https://baconipsum.com/api/?typ=meat-and-filler', 
      'https://baconipsum.com/api/?type=meat-and-filler' 
     ]; 
     Promise.all(urls.map(url => p = p.then(() => $.getJSON(url)))) 
     .then(results => { 
      console.log('done'); 
      console.log(results); 
      return results; // pass results to next .then 
     }).catch(reason => { 
      console.log('fail'); 
      console.log(reason); 
      return reason; // because I return rather than throw (or return a Promise.reject), 
      //the next .then can will get `reason` in it's argument 
     }).then(result => { 
      console.log('always'); 
      console.log(result); 
     }); 
    } 
}; 
tasks.init(); 

Answer 2

Vous n'avez pas besoin d'utiliser des promesses - et peut-être vous le savez, mais vous pouvez continuer à appeler la prochaine demande ajax dans le bloc un des succès prevoius, comme ceci:

(function($) { 
    var tasks = { 
     init: function() { 
        $.post(url_1, data_1, function(data,status){ 
      if(status == 'success') 
      { 
       $.post(url_2, data_2, function(data,status){ 
        if(status == 'success') 
        { 
         // ... and the next Ajax request goes here, etc. 
        } 
        else { 
         // show error message if 2nd Ajax request fails 
        } 
       } 
      else { 
       // show error message if 1st Ajax request failes 
      } 
     }); 
    });  
     } 

    tasks.init(); 
})(jQuery) 

Answer 3

Je ne suis pas comme familier avec les promesses jquery.

Mais cela devrait fonctionner

(function ($) { 
    var tasks = { 
     init: function() { 
      this.test1().done(this.test2).done(this.test3) 
       .done(function() { 
        console.log('done'); 
        console.log(arguments); 
       }) 
       .fail(function() { 
        console.log('fail'); 
        console.log(arguments); 
       }) 
       .always(function() { 
        console.log('always'); 
        console.log(arguments); 
       }); 
     }, 

     test1: function() { 
      console.log('inside test1'); 
      return $.getJSON('https://baconipsum.com/api/?type=meat-and-filler'); 
     }, 

     test2: function() { 
      console.log('inside test2'); 
      // note the misspelled "typ" arg to make it fail and stop execution of test3() 
      return $.getJSON('https://baconipsum.com/api/?typ=meat-and-filler'); 
     }, 

     test3: function() { 
      console.log('inside test3'); 
      return $.getJSON('https://baconipsum.com/api/?type=meat-and-filler'); 
     } 
    }; 

    tasks.init(); 
})(jQuery)