Utilisez Promise pour résoudre les problèmes d'imbrication de code causés par plusieurs requêtes Ajax asynchrones

Cet article présente principalement l'utilisation de Promise pour résoudre le problème d'imbrication de code causé par plusieurs requêtes Ajax asynchrones. Les amis dans le besoin peuvent se référer au

Problème.

Lorsque les étudiants front-end créent des pages, ils commettent une erreur courante : écrire plusieurs requêtes Ajax dans l'ordre, et les requêtes suivantes dépendent des résultats de retour des requêtes précédentes. 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 :

* Le premier est que l'ordre d'exécution ne peut pas être garanti, action2 Il est très probable qu'il ait été envoyé avant le retour de action1, ce qui fait que le paramètre someData.attr1 n'est pas transmis correctement

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

Idées

• Le problème de la duplication de code est relativement facile à résoudre, surtout dans votre propre projet, divers paramètres peuvent être déterminés à travers des spécifications, encapsuler un paramètre avec moins de paramètres La méthode ajax est très bien

//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 nécessaires les paramètres d'url, de données et de rappel sont à renseigner, et les autres sont définis

• Concernant l'ordre d'exécution, vous pouvez mettre la deuxième requête dans le rappel de la première requête, comme ceci :

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'à présent le problème semble parfaitement résolu, mais il est concevable que s'il n'y a pas seulement deux requêtes, mais 4 ou 5, et il existe d'autres opérations asynchrones (comme notre Il y a des initialisations d'objets Vue dans la page), et il y a des dépendances entre elles. De telles couches de crochets imbriqués peuvent donner le vertige.

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

Je viens de lire récemment le livre de M. Ruan Yifeng sur ES6, et l'utilisateur n'a 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à un support intégré pour Promise, et il existe pas besoin de bibliothèques tierces Maintenant, seul IE ne fonctionne pas, j'ai donc abandonné

• Modifier la fonction wrapper ajax, appeler solve() quand il réussit, appeler rejet() quand il échoue et renvoie 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
)

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Messages HTTP et connaissances de base d'ajax

Principes des requêtes cross-domaines Ajax (tutoriel graphique)

Explication d'un exemple de technologie de requête asynchrone Ajax

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!