Comment résoudre l'imbrication de code causée par plusieurs requêtes Ajax asynchrones

Cette fois, je vais vous montrer comment résoudre l'imbrication de code provoquée par plusieurs requêtes Ajax asynchrones. Quelles sont les précautions pour résoudre l'imbrication de code provoquée par plusieurs requêtes Ajax asynchrones. . Jetons un coup d'oeil.

Problème

Lorsque les étudiants front-end créaient des pages, ils ont commis une erreur courante : écrire plusieurs requêtes Ajax dans l'ordre, et les requêtes ultérieures dépendent du résultat de retour de la requête précédente. Comme le montre le code suivant :

var someData;
$.ajax({      url: '/prefix/entity1/action1',
      type: 'GET' ,
      async: true,
      contentType: "application/json",
      success: function (resp) {
        //do something on response
        someData.attr1 = resp.attr1;
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        //在这个页面里，所有的请求的错误都做同样的处理
        if (XMLHttpRequest.status == "401") {
          window.location.href = '/login.html';
        } else {
          alert(XMLHttpRequest.responseText);
        }
      }
    });
$.ajax({
      url: '/prefix/entity2/action2',
      type: 'POST' ,
      dataType: "json",
      data: JSON.stringify(someData),
      async: true,
      contentType: "application/json",
      success: function (resp) {
        //do something on response
       },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        //在这个页面里，所有的请求的错误都做同样的处理
        if (XMLHttpRequest.status == "401") {
          window.location.href = '/login.html';
        } else {
          alert(XMLHttpRequest.responseText);
        }
      }
    });

Le code ci-dessus présente deux problèmes :

* Premièrement, l'ordre d'exécution ne peut pas être garanti. L'action2 est susceptible d'être émise avant le retour de l'action1, ce qui en résulte. dans someData Le paramètre .attr1 n'a pas été transmis correctement

* Deuxièmement, la duplication de code des deux requêtes ajax était très grave

Réflexion

• Le problème de la duplication de code est relativement facile à résoudre, en particulier dans votre propre projet. Divers paramètres peuvent être déterminés via des spécifications. Encapsulez simplement une méthode ajax avec moins de paramètres

.

//url：地址
//data：数据对象，在函数内部会转化成json串，如果没传，表示用GET方法，如果传了，表示用POST方法
function ajax(url, data, callback) {
    $.ajax({
      url: url,
      type: data == null ? 'GET' : 'POST',
      dataType: "json",
      data: data == null ? '' : JSON.stringify(data),
      async: true,
      contentType: "application/json",
      success: function (resp) {
        callback(resp);
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        if (XMLHttpRequest.status == "401") {
          window.parent.location = '/enterprise/enterprise_login.html';
          self.location = '/enterprise/enterprise_login.html';
        } else {
          alert(XMLHttpRequest.responseText);
        }
      }
    });
}

De cette façon, seuls les trois paramètres nécessaires d'url, de données et de rappel doivent être renseignés, et les autres sont fixes

• Quant à ordre d'exécution, vous pouvez mettre la seconde La requête est placée dans le callback de la première requête, sous la forme :

ajax('/prefix/entity1/action1',null, function(resp){
   //do something on response
   someData.attr1 = resp.attr1;
   ajax('/prefix/entity2/action2', someData, function(resp){
     //do something on response
   }
};

Jusqu'ici le problème semble parfaitement résolu, mais il est concevable que s'il y a plus de deux requêtes, mais 4 , 5, et il y ait aussi d'autres opérations asynchrones (comme l'initialisation de l'objet Vue dans notre page), qui dépendent les unes des autres. Les parenthèses imbriquées peuvent donner le vertige aux gens.

Besoin de trouver un moyen de faire en sorte que l'expression des appels asynchrones ressemble à des appels synchrones.

Il m'est arrivé de lire récemment le livre de M. Ruan Yifeng sur ES6, et les utilisateurs n'ont pas insisté sur la compatibilité avec le navigateur IE, j'ai donc choisi la solution Promise

Solution

• Présentation de Promise

En fait, les navigateurs modernes ont déjà une prise en charge intégrée de Promise . Aucune bibliothèque tierce n'est plus nécessaire, seul IE ne fonctionne pas, j'ai donc abandonné

• Modifier la fonction d'encapsulation ajax, appeler solve() en cas de succès, appeler rejet(). en cas d'échec, et renvoyer l'objet Promise

function ajax(url, data, callback) {
  var p = new Promise(function (resolve, reject) {
    $.ajax({
      url: url,
      type: data == null ? 'GET' : 'POST',
      dataType: "json",
      data: data == null ? '' : JSON.stringify(data),
      async: true,
      contentType: "application/json",
      success: function (resp) {
        callback(resp);
        resolve();
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        if (XMLHttpRequest.status == "401") {
          window.parent.location = '/enterprise/enterprise_login.html';
          self.location = '/enterprise/enterprise_login.html';
        } else {
          alert(XMLHttpRequest.responseText);
        }
        reject();
      }
    });
  });
  return p;
}

• Modifier l'appelant

ajax('/prefix/entity1/action1',null, function(resp){
   //do something on response
   someData.attr1 = resp.attr1;
}).then(
   ajax('/prefix/entity2/action2', someData, function(resp){
     //do something on response
   }
).then(
   initVue() ;
).then(
   //do something else
)

Je crois que vous avez Je l'ai maîtrisé après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment communiquer des données entre C et View

Une interaction Ajax a été signalée avec status=parsererror Comment pour résoudre l'erreur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!