So verwenden Sie die handschriftliche Promise-Handschrift, um asynchrone Vorgänge in Vue zu implementieren

Vue ist ein sehr beliebtes Frontend-Framework. Seine Kernidee sind datengesteuerte Ansichten. Vue vereinfacht den Front-End-Entwicklungsworkflow durch datenbasierte Mechanismen und Komponentenisierungsideen erheblich und bietet Entwicklern eine effizientere und bequemere Entwicklungserfahrung. In Vue müssen wir häufig asynchrone Vorgänge ausführen, z. B. das Anfordern von Serverdaten, Timern usw. Promise ist eine häufig verwendete asynchrone Betriebsmethode in JavaScript und wird auch häufig in Vue-Projekten verwendet. In diesem Artikel wird detailliert beschrieben, wie man asynchrone Vorgänge durch handschriftliches Promise in Vue implementiert.

Grundlegende Verwendung von Promise

In Vue erhalten wir Serverdaten normalerweise über AJAX-Anfragen. Da AJAX ein asynchroner Vorgang ist, muss er mit Promise gekapselt werden. Die übliche Verwendung von Promise ist wie folgt:

let promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    // 模拟异步操作结束
    let result = 'This is data requested from server.';
    // 将数据传递给 then 方法
    resolve(result);
  }, 1000);
});

promise.then(data => {
  console.log(data);
}).catch(error => {
  console.log(error);
});

Im obigen Code erstellen wir zunächst ein Promise-Objekt. Die Funktion enthält zwei Parameter, Auflösung und Ablehnung, die die Rückruffunktionen für erfolgreich darstellen bzw. fehlgeschlagene asynchrone Vorgänge. Nachdem der asynchrone Vorgang beendet ist, übergeben wir die Daten an die Rückruffunktion in der then-Methode, indem wir die Auflösungsfunktion aufrufen. Wenn während eines asynchronen Vorgangs ein Fehler auftritt, können wir die Fehlerinformationen über die Reject-Funktion an die Rückruffunktion in der Catch-Methode übergeben.

Handschriftliches Versprechen zur Implementierung asynchroner Vorgänge

In Vue müssen wir häufig bestimmte Tool-Methoden oder Vue-Instanzmethoden kapseln und für die globale Verwendung verfügbar machen. Daher ist das handschriftliche Versprechen zu einer wesentlichen Fähigkeit geworden. Im Folgenden zeigen wir, wie Sie handgeschriebene JavaScript-Versprechen verwenden, um asynchrone Vorgänge zu implementieren.

Zuerst müssen wir eine Funktion definieren, die asynchrone Vorgänge kapselt, und zwei Parameter übergeben, auflösen und ablehnen, um die Erfolgs- oder Fehlerrückruffunktion des asynchronen Vorgangs zu steuern. Der Code lautet wie folgt:

function myPromise(fn) {
  let self = this;
  self.value = null;
  self.error = null;
  self.onFulfilled = null;
  self.onRejected = null;
  
  function resolve(value) {
    self.value = value;
    self.onFulfilled(self.value);
  }
  
  function reject(error) {
    self.error = error;
    self.onRejected(self.error);
  }

  fn(resolve, reject);
}

Im obigen Code definieren wir die Funktion myPromise und initialisieren einige Variablen wie Wert und Fehler. In der Funktion definieren wir zwei Callback-Funktionen „resolve“ und „reject“ und rufen diese mit dem übergebenen Parameter fn auf. Die Resolve-Rückruffunktion empfängt einen Wertwert, der verwendet wird, um Daten an die then-Methode zu übergeben, nachdem der asynchrone Vorgang erfolgreich ist. Die Reject-Callback-Funktion empfängt eine Fehlermeldung, die verwendet wird, um die Fehlermeldung an die Catch-Methode zu übergeben, nachdem der asynchrone Vorgang fehlgeschlagen ist.

Als nächstes müssen wir die Methode then implementieren, um die Rückruffunktion zu verarbeiten, nachdem der asynchrone Vorgang erfolgreich ist. Der Code lautet wie folgt:

myPromise.prototype.then = function(onFulfilled, onRejected) {
  let self = this;
  self.onFulfilled = onFulfilled;
  self.onRejected = onRejected;
};

Im obigen Code haben wir die then-Methode auf dem myPromise-Prototyp implementiert und die beiden Rückruffunktionen onFulfilled und onRejected als Parameter übergeben. In der Methode speichern wir diese beiden Rückruffunktionen im Self-Objekt, rufen die Funktion onFulfilled auf, nachdem der asynchrone Vorgang erfolgreich ist, und übergeben die Daten an die Rückruffunktion in der Methode then. Nachdem der asynchrone Vorgang fehlgeschlagen ist, rufen Sie die Funktion onRejected auf und übergeben Sie die Fehlerinformationen an die Catch-Methode.

Schließlich müssen wir die Catch-Methode implementieren, um die Rückruffunktion zu verarbeiten, nachdem der asynchrone Vorgang fehlgeschlagen ist. Der Code lautet wie folgt:

myPromise.prototype.catch = function(onRejected) {
  let self = this;
  self.onRejected = onRejected;
};

Im obigen Code haben wir die Catch-Methode im myPromise-Prototyp implementiert und die Rückruffunktion onRejected als Parameter übergeben. In der Methode speichern wir die onRejected-Funktion im Self-Objekt und übergeben die Fehlermeldung an die onRejected-Rückruffunktion, nachdem der asynchrone Vorgang fehlschlägt.

Umfassende Anwendung

Als nächstes werden wir asynchrone Operationen basierend auf Vue implementieren und mit myPromise kombinieren. In einer Vue-Instanz definieren wir eine asynchrone Methode fetchData zum Anfordern von Serverdaten. In der fetchData-Methode schreiben wir von Hand ein Promise-Objekt, um Daten anzufordern, und speichern die Daten dann im Datenattribut.

new Vue({
  el: '#app',
  data: {
    data: null,
    error: null
  },
  methods: {
    fetchData: function() {
      let self = this;
      return new myPromise(function(resolve, reject) {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '/api/data', true);
        xhr.onreadystatechange = function() {
          if(xhr.readyState === 4) {
            if(xhr.status === 200) {
              resolve(JSON.parse(xhr.responseText));
            } else {
              reject(xhr.statusText);
            }
          }
        };
        xhr.onerror = function() {
          reject(xhr.statusText);
        };
        xhr.send();
      });
    }
  },
  mounted: function() {
    let self = this;
    self.fetchData().then(function(data) {
      self.data = data;
    }).catch(function(error) {
      self.error = error;
    });
  }
});

Im obigen Code definieren wir zunächst eine Vue-Instanz und initialisieren dann die Variablen, die zum Speichern von Daten und Fehlerinformationen im Datenattribut verwendet werden. In der fetchData-Methode schreiben wir von Hand ein Promise-Objekt, erstellen ein AJAX-Anfrageobjekt und übergeben die Rückruffunktionen für Erfolg und Misserfolg der Datenanforderung an die Auflösungs- bzw. Ablehnungsfunktionen. Nach erfolgreicher Ausführung des asynchronen Vorgangs erhalten wir die vom Server zurückgegebenen Daten und speichern sie im Datenattribut. Nachdem der asynchrone Vorgang fehlschlägt, erhalten wir die Fehlerinformationen und speichern sie im Fehlerattribut. In der gemounteten Hook-Funktion erhalten wir die Serverdaten durch Aufrufen der Methode fetchData und verarbeiten den Erfolg und Misserfolg des asynchronen Vorgangs über die Methoden then und Catch. Nachdem der asynchrone Vorgang erfolgreich war, erhalten wir die vom Server zurückgegebenen Daten und weisen sie der globalen Variablen self.data zu. Nachdem der asynchrone Vorgang fehlschlägt, erhalten wir die Fehlermeldung und speichern sie in der globalen Variablen self.error.

Durch das handschriftliche Schreiben von Promise können wir die Prinzipien und die Verwendung von Promise besser verstehen und unsere eigenen Tool-Methoden oder Vue-Instanzmethoden kapseln. In der tatsächlichen Entwicklung sollten wir geeignete asynchrone Verarbeitungsmethoden basierend auf spezifischen Anforderungen und Geschäftsszenarien auswählen, um die Entwicklungseffizienz und die Benutzererfahrung des Projekts zu verbessern.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die handschriftliche Promise-Handschrift, um asynchrone Vorgänge in Vue zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!