Asynchrone APIs mit den Fetch -API- und ES6 -Generatoren

Kernpunkte

• ecmascript 6 (ES6) unterstützt die asynchrone Programmierung durch Versprechen und Generator besser und führte die Fetch -API ein, um XMLHTTPrequest als Grundlage für die Kommunikation mit Remote -Ressourcen zu ersetzen.
Die Methode
• Fetch -API gibt ES6 -Versprechen -Objekte zurück, die mit Generator verwendet werden können, um die Grundlage komplexer asynchroner Operationen zu bilden, z. B. eine Reihe von Operationen, bei denen jeder Vorgang vom Wert abhängt, der vom vorherigen Vorgang zurückgegeben wird.
• Generator kann mit der Fetch -API verwendet werden, um Aufgaben wie lange Umfragen auszuführen, bei denen der Client ständig Anforderungen an den Server sendet, bis eine Antwort erhält. Dies geschieht durch die Erstellung einer Antwort, bevor sie Daten enthält.
• API und ES6 -Generator können auch mehrere Abhängigkeiten asynchroner Aufrufe implementieren, wobei jeder nachfolgende Vorgang vom Wert abhängt, der vom vorherigen Vorgang zurückgegeben wird. Dies kann erfolgen, indem sie in eine Generatorfunktion eingesetzt und bei Bedarf ausgeführt werden.

ecmascript 6 (auch bekannt als ecmascript 2015 oder ES6) bringt viele neue Funktionen in JavaScript, was es ideal für große Anwendungen macht. Eine Funktion ist, dass es mithilfe von Promise und Generator besser asynchrone Programme unterstützt. Ein weiterer Hinzufügen der Fetch -API, die XMLHTTPrequest als Grundlage für die Kommunikation mit Remote -Ressourcen ersetzen soll.

Die Fetch -API -Methode gibt ES6 -Versprechen -Objekte zurück, die in Verbindung mit dem Generator verwendet werden können, um die Grundlage für komplexe asynchrone Operationen zu bilden. Dies kann alles von einer Reihe von asynchronen Operationen (jeweils vom Wert des vorherigen Vorgangs zurückgegeben) sein, der wiederholt asynchrone Anrufe an den Server ausgestellt werden muss, um die neueste Aktualisierung zu erhalten.

In diesem Artikel werden wir lernen, wie man die Fetch -API mit Generator verwendet, um eine asynchrone API zu erstellen. Die Fetch -API wird derzeit von Chrome-, Opera-, Firefox- und Android -Browsern unterstützt. Für nicht unterstützte Browser bieten wir eine Polyfill von GitHub an.

Wie üblich befindet sich der Code für diesen Artikel in unserem Github -Repository mit einer Demonstration der endgültigen Technik am Ende des Artikels.

Verwenden Sie den Generator für den asynchronen Betrieb

Tipp: Wenn Sie den Inhalt des Generators und der Funktionsweise überprüft haben, lesen Sie bitte: ECMASScript 2015: Generator und Iterator

Wie führen wir mit Generator asynchrone Operationen aus? Wenn wir analysieren, wie Generator funktioniert, werden wir die Antwort finden.

Die Generatorfunktion, die den Iterator implementiert, hat die folgende Struktur:

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

yield Das Schlüsselwort ist dafür verantwortlich, das Ergebnis zurückzugeben und die Ausführung der Iteratorfunktion bis zum nächsten Aufrufen des nächsten Mals zu behaupten. Es bewahrt auch den Zustand der Funktion, anstatt alles, wenn es das nächste Mal aufgerufen wird, wiederzugeben, und erinnert sich effektiv daran, wo es zuletzt gegangen ist.

Wir können die obige Funktion als Form ohne while Schleife wiederherstellen:

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

In den obigen zwei Fällen verhält sich die Funktion gleich. Der einzige Grund, das Schlüsselwort yield zu verwenden, besteht darin, die Ausführung der Funktion bis zur nächsten Iteration (die selbst ein bisschen asynchron erscheint) zu pausieren. Da die Anweisung yield einen beliebigen Wert zurückgeben kann, können wir auch ein Versprechen zurückgeben und die Funktion mehrerer asynchroner Anrufe ausführen.

Verwenden Sie den Generator mit Fetch -API

Tipp: Für die Überprüfung der Fetch -API schauen Sie sich bitte an: Einführung in das Fetch -API

Wie bereits erwähnt, ist die Fetch -API so konzipiert, dass sie XMLHTTPrequest ersetzen. Diese neue API bietet die Kontrolle über die verschiedenen Teile von HTTP -Anfragen und gibt ein Versprechen zurück, das anhand der Antwort des Servers analysiert oder abgelehnt wird.

lange Umfrage

Einer der Anwendungsfälle, in denen die Fetch -API und der Generator zusammen verwendet werden können, ist eine lange Wahl. Lange Umfragen ist eine Technik, bei der ein Client ständig Anfragen an den Server sendet, bis eine Antwort erhalten wird. In diesem Fall können Sie den Generator verwenden, um die Antwort kontinuierlich zu erzeugen, bis die Antwort Daten enthält.

Um lange Umfragen zu simulieren, habe ich nach fünf Versuchen eine Express-Rast-API in den Beispielcode aufgenommen, der auf Echtzeitwetterinformationen der Stadt reagiert. Hier ist die REST -API:

function *myIterator(){
  //计算值 1
  yield value1;

  //计算值 2
  yield value2;
  ...

  //计算值 n
  yield valuen;
}

Schreiben wir nun eine Generatorfunktion, die diese API mehrmals aufruft und ein Versprechen für jede Iteration zurückgibt. Auf dem Client wissen wir nicht, wie viele Iterationen wir Daten vom Server erhalten. Diese Methode verfügt also über eine unendliche Schleife, die jede Iteration den Server annimmt und ein Versprechen für jede Iteration zurückgibt. Das Folgende ist die Implementierung dieser Methode:

var polls=0;

app.get('/api/currentWeather', function(request, response){
  console.log(polls, polls < 5);
  if(polls < 5){
    polls++;
    response.send({});
  } else {
    response.send({temperature: 25});
  }
});

Wir brauchen eine Funktion, um diese Funktion kontinuierlich aufzurufen und zu überprüfen, ob der Wert nach dem Versprechen vorhanden ist. Es wird eine rekursive Funktion sein, die die nächste Iteration des Generators aufruft und den Prozess nur dann stoppt, wenn der vom Generator zurückgegebene Wert gefunden wird. Das folgende Code -Snippet zeigt die Implementierung dieser Methode und die Aussagen, die diese Methode nennen:

function *pollForWeatherInfo(){
  while(true){
    yield fetch('/api/currentWeather',{
      method: 'get'
    }).then(function(d){
      var json = d.json();
      return json;
    });
  }
}

runPolling Wie wir hier sehen, erstellt der erste Aufruf zur Funktion next das Generatorobjekt. Die value -Methode gibt ein Objekt mit dem Attribut fetch zurück, das in unserem Fall das von der polls -Methode zurückgegebene Versprechen enthält. Wenn dieses Versprechen analysiert wird, enthält es ein leeres Objekt (zurück, wenn die

-Variable weniger als 5 liegt) oder ein anderes Objekt, das die erforderlichen Informationen enthält.

temperature Als nächstes überprüfen wir die

Eigenschaft dieses Objekts (dies zeigt den Erfolg an). Wenn es nicht vorhanden ist, übergeben wir das Generatorobjekt zurück an den nächsten Funktionsaufruf (um zu vermeiden, dass der Generatorstatus verloren geht), oder drucken Sie den Wert des Objekts in die Konsole.

Um zu sehen, wie es funktioniert, holen Sie den Code aus unserem Repository, installieren Sie die Abhängigkeiten, starten Sie den Server und navigieren Ergebnisse:

0 true Senden ... leer 1 wahr Senden ... leer 2 wahr Senden ... leer 3 wahr Senden ... leer 4 wahr Senden ... leer 5 Falsch Senden ... Objekt

und das Objekt selbst in die Browserkonsole gedruckt.

asynchronisierte Aufrufe mehrerer Abhängigkeiten

Normalerweise müssen wir asynchrone Aufrufe mehrerer Abhängigkeiten implementieren, wobei jeder nachfolgende asynchrone Operation vom Wert abhängt, der durch den vorherigen asynchronen Betrieb zurückgegeben wird. Wenn wir eine Reihe solcher Operationen haben und sie mehrmals aufgerufen werden müssen, können wir sie in eine Generatorfunktion einfügen und bei Bedarf ausführen.

Um dies zu demonstrieren, werde ich Githubs API verwenden. Diese API bietet uns Zugriff auf grundlegende Informationen über Benutzer, Organisationen und Repositorys. Wir werden diese API verwenden, um eine Liste von Mitwirkenden zum zufälligen Repository der Organisation zu erhalten und die abgerufenen Daten auf dem Bildschirm anzuzeigen.

Um dies zu tun, müssen wir drei verschiedene Endpunkte aufrufen. Im Folgenden sind die Aufgaben aufgeführt, die ausgeführt werden müssen:

• Erhalten Sie Details der Organisation
• Wenn die Organisation existiert, erhalten Sie das Repository der Organisation
• Mitwirkenden zu einem der Repositories der Organisation (zufällig ausgewählt)

Erstellen wir eine Wrapper -Funktion um die Fetch -API, um das wiederholte Schreiben von Code zum Erstellen von Header und das Erstellen von Anforderungsobjekten zu vermeiden.

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

Die folgende Funktion verwendet die obige Funktion und führt bei jedem Aufruf ein Versprechen:

function *myIterator(){
  //计算值 1
  yield value1;

  //计算值 2
  yield value2;
  ...

  //计算值 n
  yield valuen;
}

Schreiben wir nun ein Stück Logik, um die obige Funktion aufzurufen, um den Generator zu erhalten, und dann die Benutzeroberfläche mit den vom Server erhaltenen Werten zu füllen. Da jeder Anruf bei der Methode des Generators ein Versprechen zurückgibt, müssen wir diese Versprechungen verknüpfen. Im Folgenden ist das Code -Framework für den Generator mit der obigen Funktion zurückgegeben: next

var polls=0;

app.get('/api/currentWeather', function(request, response){
  console.log(polls, polls < 5);
  if(polls < 5){
    polls++;
    response.send({});
  } else {
    response.send({temperature: 25});
  }
});

(Der Demo -Teil wird hier weggelassen, weil CodePen nicht in Markdown gerendert werden kann)

Schlussfolgerung

In diesem Artikel habe ich gezeigt, wie die Fetch -API mit Generator verwendet wird, um eine asynchrone API zu erstellen. ECMascript 6 wird viele neue Funktionen in die Sprache bringen und kreative Wege finden, um sie zu kombinieren und ihre Macht zu nutzen, führt häufig zu großartigen Ergebnissen. Aber was denkst du? Ist dies eine Technologie, die wir sofort in unserer App verwenden können? Ich würde gerne Ihre Gedanken in den Kommentaren hören.

(Der FAQ -Teil wird hier weggelassen, da der Inhalt stark von den vorherigen Informationen dupliziert wird)

Das obige ist der detaillierte Inhalt vonAsynchrone APIs mit den Fetch -API- und ES6 -Generatoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!