Async-Funktionen der nächsten Generation mit Vue Async Function

Bei der letzten Xebia Knowledge Exchange Veranstaltung haben wir mit der Vue Function API experimentiert und vue-async-function erstellt, die jetzt für Ihre Vue-Projekte zur Verfügung steht! Tauchen Sie ein und sehen Sie sich an, was sie zu bieten hat.

Hintergrund der Vue Async Funktion

Vor einiger Zeit hat das React-Team React Hooks veröffentlicht. Dabei handelt es sich um eine neue Methode zur Verwaltung von Zuständen in Ihren React-Komponenten ohne die traditionelle Klassensyntax. Das Vue.js-Team möchte eine ähnliche Syntax für seine nächste Hauptversion von Vue einführen. Sie haben einen Vorschlag/ein offenes Diskussionsdokument erstellt und arbeiten an einer Implementierung, die mit dem Vorschlag synchronisiert ist. Obwohl die Diskussion noch nicht abgeschlossen ist, ist die Implementierung als Plugin für Vue 2 verfügbar.Unser Ziel bei den Xebia Knowledge Exchange Veranstaltungen ist es, Wissen zu teilen und andere zu inspirieren. Glücklicherweise stieß Gert, der Schöpfer von React Async, zu uns und hielt es für eine gute Idee, die useAsync- und useFetch-Hooks seiner Bibliothek neu zu implementieren. Wir machten uns an die Arbeit und innerhalb einer Stunde gelang es uns, eine Basisversion der beiden Funktionen neu zu implementieren.

Entwicklungsprozess

Nachdem Sie die Installationsanweisungen abgeschlossen haben, lassen Sie uns eine neue Komponente im Format Single File Component erstellen:

<Vorlage>
  <h2>useAsync Beispiel</h2>
</template>
<Skript>
export default {};
</script>

Jetzt führen wir eine asynchrone Funktion ein, die wir aufrufen möchten:

// ... Vorlage
<Skript>
async function loadStarship({ id }) {
  const headers = { Accept: "application/json" };
  const res = await fetch(https://swapi.co/api/starships/${id}/, { headers });
  if (!res.ok) throw new Error(res);
  return res.json();
}
export default {};
</script>

Die Funktion loadSpaceship holt einige Daten von der Star Wars API. Wenn der Abruf erfolgreich war, werden die Daten als JSON zurückgegeben, andernfalls wird eine Fehlermeldung ausgegeben. Jetzt wollen wir:

• diese Funktion bei der Erstellung der Komponente aufrufen
• eine Ladeanzeige anzeigen
• die Daten zur Datenverfügbarkeit präsentieren
• einen Fehlerplatzhalter anzeigen, wenn der Abruf aus irgendeinem Grund fehlgeschlagen ist

Ohne die Vue Function API müssten Sie nun hinzufügen:

• eine Datenmethode zur Vorbereitung von Lade-, Fehler- und reaktiven Dateneigenschaften
• eine erstellte Lebenszyklusmethode, um diese Funktion aufzurufen, die die reaktiven Eigenschaften aktualisiert

Mit der Zeit würden sich diese wahrscheinlich mit anderen Lebenszyklus- und Datenbelangen vermischen. Dadurch wird Ihr Code schwieriger zu verstehen und weniger wiederverwendbar. Natürlich verfügen Sie bereits über bestimmte Entwurfsmuster, um diese Belange zu trennen, z. B. über Mix-Ins oder Vererbung. Die Vue Function API bietet Ihnen eine neue Möglichkeit, diese Belange auf intuitive Weise zu trennen. Lassen Sie uns sehen, wie das funktionieren könnte:

<Vorlage>
  <div>
    <h2>useAsync Beispiel</h2>
    <div v-if="isLoading">Laden...</div>
    <div v-else-if="Fehler">Fehler!</div>
    <div v-else>{{ Daten }}</div>
  </div>
</template>
<Skript>
importieren Sie { value, onCreated } von "vue-function-api";
// ... dieselbe loadStarship-Funktion
Standard exportieren {
  setup() {
  const isLoading = value(true);
  const error = value(null);
  const data = value(null);
  onCreated(async () =>  {
  versuchen {
  const result = await loadStarship({ id: 2 });
  data.value = Ergebnis;
  } catch (e) {
  error.value = e;
  } finally {
  isLoading.value = false;
  }
  });
  zurück {
  isLoading,
  Fehler,
  Daten,
  };
  }
};
</script>

Wir können dieses Beispiel mit einer Fehlerbehandlung erweitern und andere Lebenszyklusmethoden verwenden, um es noch schöner zu machen. Aber das ist nicht der Sinn der Vue Function API. In unserer Setup-Funktion gruppieren wir nun unsere Daten und Lebenszyklusbelange zusammen. Und was noch besser ist, wir können sie in getrennten Funktionen unterbringen. Dies ist der bevorzugte Weg, um die verschiedenen Anliegen zu trennen, und hier kommt vue-function-apicomesins Spiel.

useAsync und useFetch

Lassen Sie uns sehen, wie dieses Beispiel aussieht, wenn Sie useAsync verwenden:

// ... dieselbe Vorlage
<Skript>
importieren Sie { useAsync } von "vue-async-function";
// ... dieselbe loadStarship-Funktion
Standard exportieren {
  setup() {
  const { data, error, isLoading } = useAsync(loadStarship, { id: 2 });
  return { data, error, isLoading };
  }
};
</script>

Das ist wirklich kurz! Lassen Sie es uns noch kürzer machen. Das Abrufen von Daten ist so häufig, dass es dafür eine eigene useFetch-Funktion gibt:

// ... dieselbe Vorlage
<Skript>
importieren Sie { useFetch } von "vue-async-function";
Standard exportieren {
  setup() {
  const id = 2;
  const { data, error, isLoading } = useFetch(https://swapi.co/api/starships/${id}/, {
  Kopfzeilen: { Accept: "application/json" }
  });
  return { data, error, isLoading };
  }
};
</script>

Bonus: Wenn Sie useAsync verwenden, erhalten Sie auch ein AbortController.signal, das Sie einhängen können, um Netzwerkanfragen abzubrechen, wenn die Komponente zerstört wird. Wenn Sie useFetch verwenden, ist dies bereits erledigt.

Fazit

Die neue Vue Function API bringt ein gut durchdachtes Entwurfsmuster auf den Tisch. Das Schreiben von wiederverwendbaren Vue-Funktionen fühlt sich intuitiver an und Sie können sie leicht mit anderen teilen. Die Entwicklung einer useAsync- und useFetch-Hilfsfunktion verlief sehr reibungslos. Den Code finden Sie im vue-async-function Repo oder installieren Sie das npm-Paket. Weitere Beispiele finden Sie im Beispiel-Repo.

Über den Autor

Hallo, ich bin Albert Brand und arbeite als Software-Tüftler und Trainer bei Xebia. Zögern Sie nicht, mich zu kontaktieren!