Stoppen Sie Fehler, bevor sie Sie stoppen

Fehler stoppen, bevor sie Sie stoppen: Der sichere Zuweisungsoperator (?=) und der ordnungsgemäße Umgang mit Versprechen

Während sich JavaScript weiterentwickelt, kommen immer wieder neue Funktionen und Vorschläge hinzu, die darauf abzielen, die Codierung effizienter und fehlersicherer zu machen. Eine dieser Funktionen ist der Safe Assignment Operator (?=), eine vorgeschlagene Ergänzung der Sprache. Während wir immer noch auf die offizielle Veröffentlichung warten, können wir heute ähnliche Funktionen implementieren, um unseren Code vor häufigen Problemen wie Null- oder undefinierten Werten zu schützen.

In diesem Artikel untersuchen wir den ?=-Operator, erstellen unsere eigene Version mit vorhandenem JavaScript und stellen praktische Möglichkeiten vor, um Versprechen in asynchronen Vorgängen eleganter zu handhaben.

Den sicheren Zuweisungsoperator verstehen (?=)

Was ist der ?=-Operator?

Mit dem Safe Assignment Operator (?=) können Entwickler einer Variablen nur dann einen Wert zuweisen, wenn das Ziel null oder undefiniert ist. Es ist eine prägnantere Formulierung: „Weisen Sie diesen Wert zu, wenn die Variable leer ist.“

So funktioniert es:

let username = null;
username ?= "Shahar"; 
console.log(username); // Output: "Shahar"

In diesem Fall wird der Variablen Benutzername „Shahar“ zugewiesen, da ihr Wert null war. Wenn der Benutzername einen vorhandenen Wert hätte, würde der Operator die Zuweisung einfach übergehen.

Warum es nützlich ist

Der ?=-Operator vereinfacht den Code, indem er die Notwendigkeit expliziter If-Prüfungen oder ternärer Operationen reduziert, um eine sichere Zuweisung zu gewährleisten. Allerdings befindet sich dieser Operator innerhalb von ECMAScript noch in der Vorschlagsphase, was bedeutet, dass er sich ändern kann, bevor er Teil der JavaScript-Sprache wird. Die Entwicklung können Sie hier verfolgen.

Erstellen einer sicheren Zuweisungsfunktion

Einführung von SafeAssign

Während wir darauf warten, dass ?= offiziell wird, können wir sein heutiges Verhalten mit einer benutzerdefinierten Dienstprogrammfunktion namens „safeAssign“ nachahmen. Diese Funktion verwendet den Nullish-Coalescing-Operator (??), der in modernen Umgebungen bereits weithin unterstützt wird.

Hier ist unsere SafeAssign-Funktion:

function safeAssign(target, value) {
  return target ?? value;
}

Beispiel in Aktion

Mal sehen, wie es funktioniert:

let username = undefined;
username = safeAssign(username, "Shahar");
console.log(username); // Output: "Shahar"

Das ist im Grunde das, was der ?=-Operator tun würde. Wenn die Variable null oder undefiniert ist, weisen wir ihr einen Wert zu; andernfalls lassen wir es unberührt.

Einschränkungen von SafeAssign

safeAssign bietet zwar ähnliche Funktionen wie ?=, weist jedoch Einschränkungen auf:

• Einfachheit: SafeAssign ist eine Hilfsfunktion und kann nicht das gleiche Maß an syntaktischer Eleganz bieten wie der native ?=-Operator. Die übermäßige Verwendung benutzerdefinierter Funktionen kann zu ausführlicherem Code führen.
• Leistung: Obwohl die Auswirkungen von SafeAssign auf die Leistung in kleinen Anwendungen vernachlässigbar sind, werden native Operatoren wie ?= in größeren Systemen aufgrund von Engine-Optimierungen wahrscheinlich schneller sein.
• Browser-Unterstützung: Der in SafeAssign verwendete Nullish-Koaleszenzoperator (??) wird in den meisten modernen Browsern und Umgebungen unterstützt, ältere Umgebungen unterstützen ihn jedoch möglicherweise nicht ohne Polyfills.

Ein schneller Vergleich mit anderen Sprachen

Viele andere Sprachen bieten ähnliche Funktionen wie der vorgeschlagene ?=-Operator:

• C# verfügt über den nullverschmelzenden Zuweisungsoperator (??=), der sich ähnlich wie der ?=-Vorschlag von JavaScript verhält.
• Python verwendet das Schlüsselwort or für sichere Zuweisungen, wobei a = a oder value ein gängiges Muster ist, um einen Wert nur dann zuzuweisen, wenn a falsch ist.

Diese Operatoren vereinfachen den Umgang mit potenziell leeren Werten und reduzieren den Boilerplate-Code.

Umgang mit asynchronen Vorgängen mit SafeAwait

Wir stellen vor: safeAwait

Bei der Arbeit mit asynchronen Vorgängen in JavaScript kommt es leicht zu abgelehnten Versprechen oder unerwarteten Ergebnissen. Anstatt jede Ablehnung manuell mit .catch() abzuwickeln, können wir den Prozess mithilfe einer benutzerdefinierten Funktion namens „safeAwait“ rationalisieren, die Versprechen in eine sauberere, sicherere Struktur verpackt.

Hier ist die Funktion „safeAwait“:

async function safeAwait(promise, errorHandler) {
  try {
    const data = await promise;
    return [null, data]; // Success: No error, return the data
  } catch (error) {
    if (errorHandler) errorHandler(error); // Optional error handler
    return [error, null]; // Error occurred, return error with null data
  }
}

Beispiel: Daten mit Fehlerbehandlung abrufen

Lassen Sie uns SafeAwait verwenden, um Daten von einer API abzurufen und potenzielle Fehler zu behandeln:

async function getData() {
  const [error, response] = await safeAwait(
    fetch("https://api.example.com"),
    (err) => console.error("Request failed:", err)
  );

  if (error) return; // Exit if there's an error
  return response; // Return response if successful
}

In diesem Beispiel behandelt SafeAwait sowohl Erfolgs- als auch Fehlerfälle, sodass die aufrufende Funktion das Ergebnis vorhersehbarer verarbeiten kann.

Variationen von SafeAwait

Wir können SafeAwait auch für verschiedene Anwendungsfälle erweitern. Hier ist zum Beispiel eine Version, die das Versprechen einmal wiederholt, bevor es fehlschlägt:

async function safeAwaitWithRetry(promise, errorHandler, retries = 1) {
  let attempt = 0;
  while (attempt 



<p>Diese Variante wiederholt das Versprechen bis zu einer bestimmten Anzahl von Malen, bevor sie das Handtuch wirft.</p>

<h2>
  
  
  Best Practices for Error Handling in JavaScript
</h2>

<p>When working with asynchronous code, proper error handling is crucial. Here are some best practices:</p>

<ol>
<li>
<strong>Always handle rejected promises</strong>: Unhandled promise rejections can lead to crashes or undefined behavior. Use try/catch or .catch() to ensure promises are properly handled.</li>
<li>
<strong>Centralize error handling</strong>: Utility functions like safeAwait allow you to centralize error handling, making it easier to manage and debug your code.</li>
<li>
<strong>Graceful degradation</strong>: Ensure that your application can recover from errors gracefully without crashing or leaving the user in an undefined state.</li>
<li>
<strong>Use custom error messages</strong>: When throwing errors, provide meaningful error messages to help with debugging.</li>
</ol>

<h2>
  
  
  Before and After: Clean Code with safeAssign and safeAwait
</h2>

<p>Here’s a quick comparison of how these utilities can clean up your code.</p>

<h3>
  
  
  Without safeAssign:
</h3>



<pre class="brush:php;toolbar:false">if (user === null || user === undefined) {
  user = "Shahar";
}

With safeAssign:

user = safeAssign(user, "Shahar");

Without safeAwait:

try {
  const response = await fetch("https://api.example.com");
} catch (error) {
  console.error("Request failed:", error);
}

With safeAwait:

const [error, response] = await safeAwait(fetch("https://api.example.com"), (err) => console.error("Request failed:", err));

Conclusion

In summary, while the Safe Assignment Operator (?=) is still a proposal, we can replicate its behavior today using the safeAssign function for nullish values and safeAwait for more complex asynchronous operations. Both utilities simplify your code, making it more readable and maintainable.

Key Takeaways:

• The ?= operator simplifies safe assignments but is still in the proposal stage.
• You can replicate ?= functionality with safeAssign using the nullish coalescing operator (??), which is widely supported.
• For asynchronous operations, safeAwait provides a cleaner way to handle promise rejections and errors.
• Keep an eye on ECMAScript proposals for future updates.

By leveraging these patterns, you can handle errors like a pro and keep your code clean, readable, and safe.

Das obige ist der detaillierte Inhalt vonStoppen Sie Fehler, bevor sie Sie stoppen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!