javascript - Des doutes sur les opérations asynchrones Promise et sur la façon de les écrire avec plus d'élégance

Question

• Ces derniers jours, j'ai lu beaucoup de posts techniques liés aux "promesses", j'en suis ébloui, et je ne comprends que peu leurs fonctions.

• Parlons d'abord du problème. Ajax est le plus utilisé dans le projet. Il y a un problème très désagréable "plusieurs requêtes de dépendance ajax". -free Toutes les méthodes sont synchronisées, mais le résultat est une expérience terrible. La page se fige et le chargement s'arrête. Ce qui est dégoûtant dans l'utilisation d'opérations asynchrones, c'est la couche après couche de rappels et d'opérations dépendantes ultérieures.
  

• La vie est une question de lancer, alors je suis revenu au premier paragraphe et j'ai lu diverses choses, et j'ai vu un certain frère analyser le principe de la promesse. Voici le code de ce frère, http://malcolmyu.github.io/. maman...

function Promise(fn) {
  var state = 'pending';
  var value;
  var deferred = null;

  function resolve(newValue) {
    if(newValue && typeof newValue.then === 'function') {
      newValue.then(resolve, reject);
      return;
    }
    state = 'resolved';
    value = newValue;

    if(deferred) {
      handle(deferred);
    }
  }

  function reject(reason) {
    state = 'rejected';
    value = reason;

    if(deferred) {
      handle(deferred);
    }
  }

  function handle(handler) {
    if(state === 'pending') {
      deferred = handler;
      return;
    }

    var handlerCallback;

    if(state === 'resolved') {
      handlerCallback = handler.onResolved;
    } else {
      handlerCallback = handler.onRejected;
    }

    if(!handlerCallback) {
      if(state === 'resolved') {
        handler.resolve(value);
      } else {
        handler.reject(value);
      }

      return;
    }

    var ret = handlerCallback(value);
    handler.resolve(ret);
  }

  this.then = function(onResolved, onRejected) {
    return new Promise(function(resolve, reject) {
      handle({
        onResolved: onResolved,
        onRejected: onRejected,
        resolve: resolve,
        reject: reject
      });
    });
  };

  fn(resolve, reject);
}

• Après l'avoir lu, je n'ai pas pu m'empêcher de me demander à nouveau, alors( function(){ do... } ), n'est-ce pas un rappel ? Se pourrait-il que le sens du lancer soit d'utiliser du sucre de syntaxe ( je n'y crois pas).

• L'existence est raisonnable, alors au final, comment utiliser les promesses de manière raisonnable et comment faire fonctionner le processus ajax avec plus d'élégance ? Au fait, que pensez-vous de l'utilisation d'axios fetch.js ?

Answer 1

Promise est né pour résoudre le contrôle de flux asynchrone.Le cœur de son utilisation est la méthode then ;
then ressemble à un rappel à première vue, mais la caractéristique de then est qu'elle peut gérer les exceptions et l'écriture en chaîne. quelques Les dépendances de la requête ajax sont les suivantes :

A1 -> Si vous utilisez Promise, le code sera très clair
Préparez d'abord A1, A2, Aa, Ab, Ac, Ad et Axe. Ce sont toutes des fonctions qui renvoient des objets de promesse en fonction des dépendances. Je ne les écrirai plus. Ensuite, vous pourrez regarder la performance de Promise :.

Promise.all([
    A1().then(A2),      //A1 -> A2
    Promise.all([
        Aa().then(Ab),  //Aa -> Ab
        Ac()            //Ac
    ]).then(Ad)         //Ab + Ac -> Ad;
]).then(Ax,Err)         //A2 + Ad -> Ax
.then(function(v){
//完成
})

A1, Aa et Ac n'ont aucune dépendance et seront exécutés simultanément, et continueront en fonction de l'achèvement des dépendances
Quel que soit le problème Ajax qui se produit, l'événement Err final sera déclenché pour gérer l'erreur de manière uniforme Si vous utilisez ; un rappel pour l'écrire Essayez-le, soit l'efficacité n'est pas bonne, soit un tas de code est ajouté à la méthode de rappel pour déterminer la dépendance .
Code de référence :

//首先准备好 A1,A2,Aa,Ab,Ac,Ad,Ax 都是基于回调的异步函数
var a2,ab,ac,ad;  //用来保存完成情况的变量
function runAx(){
    if(a2 == undefined || ad == undefined) return; //判断依赖
    Ax(a2,ad,function(e,v){
        //完成
    })
}
function runAd(){
    if(ab == undefined || ac == undefined) return; //判断依赖
    Ad(ab,ac,function(e,v){
        ad = v;
        runAx();
    })
}
A1(function(e,v){   
    A2(v,function(e,v){
        a2 = v;
        runAx();
    })
})
Aa(function(e,v){
    Ab(v,function(e,v){
        ab = v;
        runAd();
    })
})
Ac(function(e,v){
    ac = v;
    runAd();
})

Le code ci-dessus ne gère pas les erreurs et est si long Si les dépendances étaient plus compliquées, vous pouvez imaginer la quantité de code et il est facile de faire des erreurs ;

Answer 2

Votre compréhension est fondamentalement correcte. En fait, Promise ce n’est pas très simplifié, cela réduit simplement le niveau d’imbrication.

Donc, la solution ultime est Async/Await, la personne qui pose la question peut vérifier l'information.

Answer 3

L'élégance se succède, redressant la forme du sapin de Noël, c'est la contribution de Promises.

Lorsque j'écris un programme, j'ai besoin d'imbriquer sept ou huit rappels, et Promises est bien meilleur.

Si vous pensez qu'écrire est trop compliqué, alors ne l'utilisez pas, utilisez Async/Await