Heim > Web-Frontend > js-Tutorial > Was ist der Unterschied zwischen Promise Chaining und Aync/await

Was ist der Unterschied zwischen Promise Chaining und Aync/await

Linda Hamilton
Freigeben: 2024-11-16 15:47:02
Original
330 Leute haben es durchsucht

Qual a diferença de Encadeamento de Promises e Aync/await

Heute wurde ich mit meiner eigenen Unkenntnis über den Unterschied zwischen diesen beiden Arten des Umgangs mit asynchronen Vorgängen konfrontiert, also beschloss ich, diesen Beitrag zu lesen und zu recherchieren – als Erinnerung an mich selbst und wer weiß, vielleicht helfen Sie anderen Entwicklern, diesen Unterschied besser zu verstehen.

Damals wusste ich mehr oder weniger, wie ich erklären sollte, dass beide das Gleiche tun, wobei then() die aufgelösten Daten liefert, während „resolve“ und „reject“ verwendet wurden, um mit Erfolg oder Fehler zu enden. Async/await musste auf das Ergebnis warten, bevor mit dem nächsten Schritt fortgefahren wurde. Es war nicht ganz falsch, aber es könnte viel besser erklärt werden.

Versprechen

Versprechen ist, wie der Name schon sagt, ein Datenrückgabe-„Versprechen“, das drei Hauptzustände durchläuft:

  1. Ausstehend: Ausgangszustand, wenn das Versprechen noch nicht gelöst oder abgelehnt wurde.
  2. Erfüllt: Der Vorgang wurde erfolgreich abgeschlossen.
  3. Abgelehnt: Der Vorgang ist fehlgeschlagen und der Fehler wurde abgefangen.
const minhaPromise = new Promise((resolve, reject) => {
  let sucesso = true; // Apenas um exemplo condicional

  if (sucesso) {
    resolve("Operação concluída com sucesso!");
  } else {
    reject("Ocorreu um erro na operação.");
  }
});
Nach dem Login kopieren

Versprechensverkettung

Dies war vor async/await die gebräuchlichste Art, mit Promises umzugehen. Wir verwenden die Methoden then(), Catch() und Finally().

  • then(): Wird zum Empfangen und Bearbeiten der erfolgreich aufgelösten Daten verwendet.
  • catch(): Wird verwendet, um den Fehler zu behandeln, wenn das Versprechen abgelehnt wird.
  • finally(): Wird verwendet, um Code unabhängig vom Ergebnis auszuführen.
minhaPromise
  .then((mensagem) => {
    console.log(mensagem); // "Operação concluída com sucesso!"
  })
  .catch((erro) => {
    console.error(erro); // Se der erro, isso será executado.
  })
  .finally(() => {
    console.log("Finalizando a execução da Promise"); // Sempre será executado.
  });
Nach dem Login kopieren

Asynchron/Warten

Eine mit async gekennzeichnete Funktion gibt automatisch ein Promise zurück und await wird verwendet, um die Ausführung zu „pausieren“, bis das Promise aufgelöst ist.

async function buscarDados() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log("Dados recebidos:", data);
  } catch (error) {
    console.error("Erro ao buscar dados:", error);
  }
}

buscarDados();
Nach dem Login kopieren

Der Unterschied

Die Verkettung von Versprechen kann dazu führen, dass der Code sehr verschachtelt wird, insbesondere wenn wir mehrere then() hintereinander verwenden, was das Lesen erschwert.

Async/await ermöglicht es Ihnen, asynchronen Code auf eine Weise zu schreiben, die synchronem Code ähnlicher ist, wodurch die Logik leichter zu lesen und zu verstehen ist. Der Code wird sauberer, insbesondere wenn wir mehrere asynchrone Vorgänge verarbeiten müssen.

Darüber hinaus ist die Art und Weise, Fehler mithilfe von try/catch mit async/await zu behandeln, intuitiver als nur die Verwendung von „catch“ in Promises.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Promise Chaining und Aync/await. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage