So lösen Sie Codeverschachtelungen, die durch mehrere asynchrone Ajax-Anfragen verursacht werden

Dieses Mal zeige ich Ihnen, wie Sie die durch mehrere asynchrone Ajax-Anfragen verursachte Code-Verschachtelung lösen können . Werfen wir einen Blick darauf.

ProblemAls die Front-End-Studenten Seiten erstellten, machten sie einen häufigen Fehler: Sie schrieben mehrere Ajax-Anfragen nacheinander auf und Nachfolgende Anfragen hängen vom Rückgabeergebnis der vorherigen Anfrage ab. Wie im folgenden Code gezeigt:

Der obige Code weist zwei Probleme auf:

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

* Erstens kann die Ausführungsreihenfolge von Aktion2 wahrscheinlich nicht garantiert werden, bevor Aktion1 zurückkehrt in someData Der Parameter .attr1 wurde nicht korrekt übertragen

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

Denken

Das Problem der Codeduplizierung ist relativ einfach zu lösen, insbesondere in Ihrem eigenen Projekt. Kapseln Sie einfach eine Ajax-Methode mit weniger Parametern

• Auf diese Weise müssen nur die drei notwendigen Parameter URL, Daten und Rückruf ausgefüllt werden, die anderen sind fixiert

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

Was die betrifft Ausführungsreihenfolge, Sie können die zweite eingeben. Die Anfrage wird im Rückruf der ersten Anfrage in der Form platziert:

• Bisher scheint das Problem perfekt gelöst zu sein. Es ist jedoch denkbar, dass bei mehr als zwei Anfragen 4, 5 und andere asynchrone Vorgänge (z. B. die Initialisierung des Vue-Objekts auf unserer Seite) genau solche Ebenen sind Verschachtelte Klammern können schwindelig machen.

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

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

Ich habe kürzlich zufällig das Buch von Herrn Ruan Yifeng über ES6 gelesen und die Benutzer bestanden nicht auf Kompatibilität mit dem

IE-Browser

, also habe ich mich für die Promise-Lösung

Lösung

Wir stellen vor: Promise

• Tatsächlich verfügen moderne Browser bereits über integrierte Unterstützung für Versprochen. Es werden keine Bibliotheken von Drittanbietern mehr benötigt, nur der IE funktioniert nicht, also habe ich aufgegeben

Ändern Sie die Ajax-Kapselungsfunktion, rufen Sie bei Erfolg „resolve()“ auf und rufen Sie „reject(“ auf. ) wenn fehlgeschlagen, und Promise-Objekt zurückgeben

Anrufer ändern

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

• Ich glaube dir Nachdem ich den Fall in diesem Artikel gelesen habe, habe ich die Methode gemeistert. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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
)

So kommunizieren Sie Daten zwischen C und View

Ajax-Interaktion wurde mit status=parsererror gemeldet Wie um den Fehler zu beheben

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