Verwenden Sie Promise, um Code-Verschachtelungsprobleme zu lösen, die durch mehrere asynchrone Ajax-Anfragen verursacht werden

In diesem Artikel wird hauptsächlich die Verwendung von Promise zur Lösung des Code-Verschachtelungsproblems vorgestellt, das durch mehrere asynchrone Ajax-Anfragen verursacht wird. Freunde in Not können sich auf das

Problem beziehen

Wenn Front-End-Studenten Seiten erstellen, machen sie einen häufigen Fehler: Sie schreiben mehrere Ajax-Anfragen nacheinander auf und nachfolgende Anfragen hängen von den Rückgabeergebnissen der vorherigen Anfragen ab. Wie im folgenden Code gezeigt:

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);
        }
      }
    });

Es gibt zwei Probleme mit dem obigen Code:

* Das erste ist, dass die Ausführungsreihenfolge nicht möglich ist Seien Sie garantiert, Aktion2 ist sehr wahrscheinlich. Es wurde gesendet, bevor Aktion1 zurückgegeben wurde, was dazu führte, dass der Parameter someData.attr1 nicht korrekt übertragen wurde

* Zweitens war die Codeduplizierung der beiden Ajax-Anfragen sehr schwerwiegend

Denken

• Das Problem der Codeduplizierung ist relativ einfach zu lösen, insbesondere im eigenen Projekt können durch Spezifikationen verschiedene Parameter ermittelt werden und eine Ajax-Methode mit weniger Parametern gekapselt. Das ist in Ordnung

//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);
        }
      }
    });
}

Auf diese Weise gibt es nur drei notwendige Parameter: URL, Daten und Rückruf auszufüllen, und alles andere ist festgelegt

• Bezüglich der Ausführungsreihenfolge können Sie die zweite Anfrage in den Rückruf der ersten Anfrage einfügen, in der Form:

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
   }
};

Bisher scheint das Problem perfekt gelöst zu sein, aber es ist denkbar, dass bei mehr als zwei Anfragen, aber 4 oder 5, und da Bei anderen asynchronen Operationen (z. B. Vue-Objekten auf unserer Seite „Initialisierung“) bestehen Abhängigkeiten untereinander. Gerade solche Schichten verschachtelter Klammern können einem schwindelig werden.

Es muss eine Möglichkeit gefunden werden, den Ausdruck asynchroner Aufrufe wie synchrone Aufrufe aussehen zu lassen.

Ich habe kürzlich zufällig das Buch von Herrn Ruan Yifeng über ES6 gelesen und der Benutzer bestand nicht auf Kompatibilität mit dem IE-Browser, also habe ich mich für die Promise-Lösung entschieden

Lösung

• Wir stellen vor: Promise

Tatsächlich verfügen moderne Browser bereits über integrierte Unterstützung für Promise, und das gibt es auch keine Notwendigkeit für Bibliotheken von Drittanbietern. Jetzt funktioniert nur der IE nicht, also habe ich aufgegeben

• Ändern Sie die Ajax-Wrapper-Funktion, rufen Sie „resolve()“ auf, wenn es erfolgreich ist, und rufen Sie „reject()“ auf, wenn es erfolgreich ist es schlägt fehl und gibt das Promise-Objekt zurück

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;
}

• Anrufer ändern

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
)

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

HTTP-Nachrichten und Grundkenntnisse von Ajax

Prinzipien von Ajax-Cross-Domain-Anfragen (grafisches Tutorial)

Beispielerklärung zur asynchronen Ajax-Anfragetechnologie

Das obige ist der detaillierte Inhalt vonVerwenden Sie Promise, um Code-Verschachtelungsprobleme zu lösen, die durch mehrere asynchrone Ajax-Anfragen verursacht werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!